textarea

多行输入框。该组件是原生组件，使用时请注意相关限制。

confirm-type有效值

Tips：

• native 为false时，部分键盘增强属性和事件将失效
• native 为ture是，textarea 是一个原生组件，字体是系统字体，所以无法设置 font-family
• 不建议输入时对用户输入进行修改
• confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持

示例代码：

<!--pages/component/pages/textarea/textarea.mcml-->
<view class="container">
  <view class="statement">多行输入框。</view>
  <view class="cssname">disabled</view>
  <view>
    <textarea class="textareaClass" style="height:100rpx;" disabled="true" value="禁用的输入框"></textarea>
  </view>
  <view class="cssname">confirm-type</view>
  <view mc:for="{{confrimTypes}}">
    <textarea class="textareaClass" style="height: 100rpx;margin-bottom:10rpx;"
      bindconfirm="bindconfirm"  confirm-type="{{item.type}}" placeholder="{{item.desc}}"></textarea>
  </view>
  <view class="cssname">maxlength: 300, placeholder-style: placeholder 的样式</view>
  <view>
    <textarea class="textareaClass" maxlength="300" placeholder-style="color:red;" placeholder="最大长度300个字符最大长度300个字符最大长度300个字符最大长度300个字符"></textarea>
  </view>
  <view class="cssname">focus: true, cursor : 3</view>
  <view>
    <textarea class="textareaClass" style="height:100rpx;" focus="true" cursor="3" value="自动焦点"></textarea>
  </view>
  <view class="cssname">auto-height: true, placeholder-class:placeholder 的样式类</view>
  <view>
    <textarea class="textareaClass" auto-height="true" placeholder-class="placeholderClass" placeholder="自动增高"></textarea>
  </view>
  <view class="cssname">show-confirm-bar : false</view>
  <view>
    <textarea class="textareaClass" show-confirm-bar="{{false}}" placeholder="不显示键盘上方带有”完成“按钮那一栏"></textarea>
  </view>
  <view class="cssname">confirm-hold: true</view>
  <view>
    <textarea class="textareaClass" confirm-hold="true" confirm-type="search" placeholder="点击键盘右下角按钮时保持键盘不收起"></textarea>
  </view>
  <view class="cssname">adjust-position: false</view>
  <view>
    <textarea class="textareaClass" adjust-position="{{false}}" placeholder="键盘弹起时，不上推页面"></textarea>
  </view>
  <view class="cssname">hold-keyboard: true</view>
  <view>
    <textarea class="textareaClass" hold-keyboard="{{true}}" placeholder="focus时，点击页面的时候不收起键盘"></textarea>
  </view>
  <view class="cssname">cursor-spacing : 30</view>
  <view>
    <textarea class="textareaClass" cursor-spacing="30" value="{{selectionText}}"
      focus="{{isSelection}}"
      selection-start="2"
      selection-end="7" ></textarea>
  </view>
  <view class="cssname">selection-start : 2, selection-end: 7</view>
  <view>
    <button bindtap="selectionTap">自动焦点时，设置光标选中</button>
  </view>
  <view class="cssname">keyboard-accessory</view>
  <view class="textareaClass">
    <textarea style="height:100%;" placeholder="设置键盘上方工具栏视图">
      <keyboard-accessory style="display:flex;height: 50px;">
        <cover-view bindtap="keyboardTap" style="flex: 1; background: green;">1</cover-view>
        <cover-view bindtap="keyboardTap" style="flex: 1; background: red;">2</cover-view>
      </keyboard-accessory>
    </textarea>
  </view>
  <view class="cssname">事件绑定</view>
  <view>
    <textarea class="textareaClass"
      bindfocus="bindfocus" 
      bindconfirm="bindconfirm" 
      bindinput="bindinput" 
      bindlinechange="bindlinechange"
      bindblur="bindblur"
      bindkeyboardheightchange="bindkeyboardheightchange"
    ></textarea>
  </view>
  <view class="cssname">bindfocus:输入框聚焦时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindfocus}}</text>
  <view class="cssname">bindinput:键盘输入时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindinput}}</text>
  <view class="cssname">bindlinechange:键盘高度发生变化的时候触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindlinechange}}</text>
  <view class="cssname">bindblur:输入框失去焦点时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindblur}}</text>
  <view class="cssname">bindconfirm:点击完成按钮时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindconfirm}}</text>
  <view class="cssname">bindkeyboardheightchange:键盘高度发生变化的时候触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindkeyboardheightchange}}</text>
</view>

// pages/component/pages/textarea/textarea.js
Page({
  data: {
    types: [
      { type: 'text', desc: '文本输入键盘' },
      { type: 'number', desc: '数字输入键盘' }
    ],
    confrimTypes: [
      { type: 'send', desc: 'send:发送' },
      { type: 'search', desc: 'search:搜索' },
      { type: 'next', desc: 'next:下一个' },
      { type: 'go', desc: 'go:前往' },
      { type: 'done', desc: 'done:完成' },
      { type: 'return', desc: 'return:换行' }
    ],
    isSelection: false,
    selectionText: '指定光标与键盘的距离'
  },
  bindfocus: function(e){
    this.setData({
      bindfocus: JSON.stringify(e.detail, null, 2)
    })
  },
  bindinput: function (e) {
    this.setData({
      bindinput: JSON.stringify(e.detail, null, 2)
    })
  },
  bindlinechange: function (e){
    this.setData({
      bindlinechange: JSON.stringify(e.detail, null, 2)
    })
  },
  bindblur: function (e) {
    this.setData({
      bindblur: JSON.stringify(e.detail, null, 2)
    })
  },
  bindconfirm: function (e) {
    this.setData({
      bindconfirm: JSON.stringify(e.detail, null, 2)
    })
  },
  bindkeyboardheightchange: function(e){
    this.setData({
      bindkeyboardheightchange: JSON.stringify(e.detail, null, 2)
    })
  },
  selectionTap: function(e){
    this.setData({
      isSelection: true,
      selectionText: '指定光标与键盘的距离'
    })
  },
  keyboardTap: function(e){
    mc.showModal({
      showCancel: false,
      content: '点了点我'
    })
  }
})