2020-03-09

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

展开

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

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

用到的属性：

属性 说明

maxlength 最大输入长度，设置为 -1 的时候不限制最大长度

minlength 最小输入长度

bindinput 当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}，keyCode 为键值，目前工具还不支持返回keyCode参数。bindinput 处理函数的返回值并不会反映到 textarea 上

效果：

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

第二步：实现

思路：

bindinput="getValueLength"对textarea进行数据绑定；

在getValueLength方法中let value = e.detail.value来获取textarea的值；

用let len = parseInt(value.length)获取textarea的长度

进行最大最小数字判断

1）.wxml页面：

    {{currentWordNumber|0}}/{{max}}

       </p> <p>      <text class="minWord">{{minWord}}</text></p> <p>   

不能填写QQ、微信、电弧等联系方式，否则后台会把此信息删除。

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;

}

————————————————

版权声明：本文为CSDN博主「chibimarukochan」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/ChibiMarukoChan/article/details/88659746