textarea 多行输入框

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

注意：

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

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

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

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

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

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

扫码体验

示例代码

<!-- 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,
    });
  },
});

属性