支付寶小程序表單組件 輸入框·Textarea

多行輸入框，可輸入多行內(nèi)容。

說明：

• 無法通過 textarea 獲取鍵盤高度；
• iOS 系統(tǒng)支付寶客戶端版本 10.1.80 及以上不支持 focus=true 自動喚起；
• 可以使用 my.hideKeyboard 隱藏鍵盤；
• 添加屬性 controlled="{{true}}" 表示 value 內(nèi)容會完全受 setData 控制；
• 可以在 input 組件中加上 enableNative="{{false}}"，避免 textarea 彈出鍵盤后內(nèi)容被頂上去；
• 加上 enableNative="{{false}}" 解決安卓系統(tǒng)下 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">自適應(yīng)高度</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">結(jié)合表單</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,
    });
  },
});

屬性