小程序中textarea字数限制与计算

淡淡的烟草味﹌ 2022-05-29 06:37 294阅读 0赞

不管做什么类型的项目，几乎都会碰到评论框。正好也是项目需要，就顺便来总结总结：

在以往的前端中，大家都知道很容易实现。那么，在小程序中，如何去实现它呢？其实，只要你仔细看了官方文档[**https://mp.weixin.qq.com/debug/wxadoc/dev/component/textarea.html**][https_mp.weixin.qq.com_debug_wxadoc_dev_component_textarea.html]也很容易，思路如下：

1、在textarea中绑定bindinput事件。

2、通过var value = e.detail.value;获取textarea的值。

3、通过var len = parseInt(value.length);获取textarea的长度。

先上效果：

![Image 1][]

源码:

wxml代码：

<view class="conts">
        <textarea class="areas" placeholder='留下点评，帮助更多人' minlength="{
       {min}}" maxlength="{
       {max}}" bindinput="inputs"> 
            <text class="currentWordNumber">{
       {currentWordNumber|0}}/{
       {max}}</text>
            <text class="hint">{
       {texts}}</text>
        </textarea>
    </view>

wxss代码：

.conts{
      width: 750rpx;
      height: auto;
      border: 1rpx soldi red;
      margin-top: 30rpx;
    }
    .areas{
      height:152rpx;
      font-size: 30rpx;
      text-indent: 28rpx;
      border: 1rpx solid gainsboro;
      padding-top: 30rpx;
      margin: 0 auto;
      overflow: hidden;   
      position: relative; 
    }
    .currentWordNumber{
      font-size: 28rpx;
      color: gray;
      position: absolute;
      left: 593rpx;
      top: -6rpx;
    }
    .hint{
       font-size: 28rpx;
       position: absolute;
       top: 120rpx;
       left: 30rpx;
       color: #FF6600;
    }

js代码：

Page({
      data: {
        texts:"至少5个字",
        min:5,//最少字数
        max: 520, //最多字数 (根据自己需求改变) 
      },
    
      //字数限制  
      inputs: function (e) {
        // 获取输入框的内容
        var value = e.detail.value;
        // 获取输入框内容的长度
        var len = parseInt(value.length);
    
        //最少字数限制
        if(len <= this.data.min) 
            this.setData({
              texts: "加油，够5个字可以得20积分哦"
            })
        else if(len > this.data.min)
        this.setData({
          texts: " "
        })
    
        //最多字数限制
        if(len > this.data.max) return;
            // 当输入框内容的长度大于最大长度限制（max)时，终止setData()的执行
            this.setData({
               currentWordNumber: len //当前字数  
            });
      }
    })

附加：input框

来自：[**小程序极速实战开发《十》input输入框**][input]

#     #

[https_mp.weixin.qq.com_debug_wxadoc_dev_component_textarea.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/component/textarea.html
[Image 1]: 
[input]: http://www.yiyongtong.com/archives/view-2682-1.html