image.png

对比微信小小程序

1. 自带字符长度控制
2. 自带高度自适应属性：auto-height
3. 自带maxlength属性：默认140

布局代码

<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="请输入内容" maxlength="200" value="{{content}}"  />
    </view>
    <view class="page-section-btns">
      <button type="default" size="mini" onTap="bindButtonTap">聚焦                              
      </button>
      <button type="default" size="mini" onTap="clearContent">清空                             
      </button>
    </view>
  </view>
  <!-- 自适应高度 -->
  <view class="page-section">
    <view class="page-section-title">自适应高度                    
    </view>
    <view class="page-section-demo">
      <textarea onBlur="bindTextAreaBlur" auto-height placeholder="请输入内容" />
    </view>
  </view>
  <!-- 结合表单 -->
  <view class="page-section">
    <view class="page-section-title">结合表单                    
    </view>
    <form onSubmit="bindFormSubmit">
      <view class="page-section-demo">
        <textarea name="textarea" placeholder="请输入内容" />
      </view>
      <view class="page-section-btns">
        <button form-type="submit" size="mini" type="primary">提交                                        
        </button>
      </view>
    </form>
  </view>
</view>

js代码

var that;
Page({
  data: {
    height: 20,
    focus: false,
    content: '我是默认输入的值哦'
  },
  onLoad() {
    that = this;
  },
  bindButtonTap() {
    that.onFocus();
  },
  onFocus() { // 获取焦点
    that.setData({
      focus: true,
    });
  },
  onBlur(e) { // 失去焦点
    console.log("失去焦点")
    that.setData({
      content: e.detail.value,
      focus: false,
    })
  },
  bindTextAreaBlur(e) {
    console.log(e.detail.value); // 打印 输入值
    that.setData({
      content: e.detail.value
    })
  },
  bindFormSubmit(e) { // 表单提交
    my.alert({
      content: e.detail.value.textarea,
    });
  },
  clearContent() { // 清空内容
    console.log("清空内容: " + that.data.content)
    that.setData({
      content: ''
    })
  }
});