textarea 多行输入框

多行输入框,可输入多行内容。

注意:

  • 无法通过 textarea 获取键盘高度。

  • iOS 系统阿里云客户端不支持 focus=true 自动唤起。

  • 可以使用 my.hideKeyboard 隐藏键盘。

  • 添加属性 controlled="{{true}}" 表示 value 内容会完全受 setData 控制

  • 可以在 input 组件中加上 enableNative="{{false}}",避免 textarea 弹出键盘后内容被顶起。

  • 加上 enableNative="{{false}}" 解决安卓系统下 textarea 获取焦点的时候文字消失问题。

扫码体验

image.png

示例代码

<!-- API-DEMO page/component/textarea/textarea.axml -->
<view class="page">
  <view class="page-description">文本框</view>
  <view class="page-section">
    <view class="page-section-title">受控聚焦</view>
    <view class="page-section-demo">
      <textarea focus="{{focus}}" onFocus="onFocus" onBlur="onBlur" placeholder="Please input something" />
    </view>
    <view class="page-section-btns">
      <button type="default" size="mini" onTap="bindButtonTap">聚焦</button>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">自适应高度</view>
    <view class="page-section-demo">
      <textarea onBlur="bindTextAreaBlur" auto-height placeholder="Please input something" />
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">结合表单</view>
    <form onSubmit="bindFormSubmit">
      <view class="page-section-demo">
        <textarea name="textarea" placeholder="Please input something"  />
      </view>
      <view class="page-section-btns">
        <button form-type="submit" size="mini" type="primary">提交</button>
      </view>  
    </form>
  </view>
</view>
// API-DEMO page/component/textarea/textarea.js
Page({
  data: {
    height: 20,
    focus: false,
  },
  bindButtonTap() {
    this.onFocus();
  },
  onFocus() {
    this.setData({
      focus: true,
    });
  },
  onBlur() {
    this.setData({
      focus: false,
    });
  },
  bindTextAreaBlur(e) {
    console.log(e.detail.value);
  },
  bindFormSubmit(e) {
    my.alert({
      content: e.detail.value.textarea,
    });
  },
});

属性

属性

类型

默认值

描述

name

String

-

组件名字,用于表单提交获取数据

value

String

-

初始内容

placeholder

String

-

占位符

placeholder-style

String

-

指定 placeholder 的样式

placeholder-class

String

-

指定 placeholder 的样式类

disabled

Boolean

false

是否禁用

maxlength

Number

140

最大长度,当设置为-1时不限制最大长度

focus

Boolean

false

获取焦点(iOS无效)

auto-height

Boolean

false

是否自动增高

show-count

Boolean

true

是否渲染字数统计功能(

是否删除默认计数器/是否显示字数统计

controlled

Boolean

false

是否为受控组件。为 true 时,value 内容会完全受 setData 控制

onInput

EventHandle

-

键盘输入时触发,

event.detail = {value: value}

,可以直接 return 一个字符串以替换输入框的内容

onFocus

EventHandle

-

输入框聚焦时触发

event.detail = {value: value}

onBlur

EventHandle

-

输入框失去焦点时触发,

event.detail = {value: value}

onConfirm

EventHandle

-

点击完成时触发,

event.detail = {value: value}