微信小程序-textarea字数统计与限制

第一步：参考官方文档《textarea小程序》

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

用到的属性：

属性	说明
maxlength	最大输入长度，设置为 -1 的时候不限制最大长度
minlength	最小输入长度
bindinput	当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}，keyCode 为键值，目前工具还不支持返回keyCode参数。bindinput 处理函数的返回值并不会反映到 textarea 上

效果：

描述限制最小输入10个字，最多输入200个字

微信小程序-textarea字数统计与限制

第二步：实现

思路：

bindinput="getValueLength"对textarea进行数据绑定；
在getValueLength方法中let value = e.detail.value来获取textarea的值；
用let len = parseInt(value.length)获取textarea的长度
进行最大最小数字判断

1）.wxml页面：

<view class="contant">
     <view class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</view>
      <textarea name="bindTextAreaBlur" bindblur="getText" bindinput="getValueLength" show-confirm-bar='true' value="{{editText}}" bindconfirm="getText"  maxlength="{{max}}" minlength="{{min}}"auto-focus>   
      <text class="minWord">{{minWord}}</text>
     </textarea>
</view>
<view class="tips">不能填写QQ、微信、电弧等联系方式，否则后台会把此信息删除。</view>

2).js页面：

data: {
    max: 200, //限制最大输入字符数
    min: 10,  //限制最小输入字符数
    minWord: ''//提示语句
},

/****限制字数与计算 */
  getValueLength: function (e) {
    let value = e.detail.value
    let len = parseInt(value.length)
    //最少字数限制
    if (len <= this.data.min)
      this.setData({
        minWord: "至少填写10个字哦～"
      })
    else if (len > this.data.min)
      this.setData({
        minWord: " "
      })
    //最多字数限制
    if (len > 200) return;
    this.setData({
      currentWordNumber: len //当前字数 
    })
  },

3）.wxss页面：

/* pages/release/editText.wxss */

page {
  background-color: rgb(247, 247, 247);
}

.contant {
  border-top: 1px solid rgb(247, 247, 247);
  width: 100%;
  margin: 0 auto;
  background-color: #ffff;
}

textarea {
  min-height: 500rpx;
  max-height: 500rpx;
  padding: 10rpx 10rpx;
  font-size: 16px;
  width: 94%;
  margin-left: 3%;
  margin-top: 15px;
}

.tips {
  width: 96%;
  margin-left: 2%;
  height: 45px;
  color: rgba(136, 136, 136, 1);
  font-size: 14px;
  margin-top: 15px;
  text-align: left;
  font-family: PingFangSC-regular;
}

.minWord {
  color: red;
  font-size: 14px;
  position: absolute;
  top: 30px;
}

.currentWordNumber {
  height: 35px;
  line-height: 35我是谁px;
  font-size: 14px;
  float: right;
  margin-right: 15px;
  color: rgba(136, 136, 136, 1);
  margin-bottom: 10px;
}

微信小程序-textarea字数统计与限制

第一步：参考官方文档《textarea小程序》

第二步：实现

相关推荐