textarea使用中遇到的坑

微信小程序原始组件 —— textarea

1. textarea有默认的宽高

如果想设置宽高

/* 覆盖默认的宽度 */
textarea {
  width: 100%;
}

2.model:value 时，它双向数据绑定的是blur事件

当我打算通过model:value后，通过value的值来判断输入框内容是否为空进行决定下一步按钮是否高亮显示时,在开发者工具上是没有问题的，在手机上却发现，要输入框失去焦点后才会判断，这不符合我的要求，后来bindinput来判断value解决的

 <view class="textarea-wrap mt-30">
    <textarea
      auto-height
      bindinput="valueChange"
      class="fs-26"
      maxlength="{{maxLength}}"
      placeholder="请输入内容。"
      placeholder-class="placeholder-class"
      value="{{textareaValue}}"
    />
    <view
      class="flex-row justify-end fs-26 mt-30"
      style="color:{{textareaValue.length == maxLength?'red':''}}"
    >{{textareaValue.length}}/{{maxLength}}</view>
  </view>

<van-button
    custom-class="mt-60 button-class {{textareaValue?'active-class':''}}"
    disabled="{{!textareaValue}}"
    round
  >保存</van-button>

Page({
  data: {
    maxLength: 500,
    textareaValue: '',
  },

  valueChange(e) {
    this.setData({
      textareaValue: e.detail.value,
    });
  },
});

3.maxlength在微信小程序开发者工具上是起作用的，但是在手机上，你多输入还是会显示

valueChange(e) {
    this.setData({
      textareaValue: e.detail.value.substr(0, this.data.maxLength),
      valueLength:
        e.detail.value.length > this.data.maxLength ? this.data.maxLength : e.detail.value.length,
    });
  },