小程序textarea文本域字数控制---并显示已输入字数

时间:2024-10-22 11:17:44

有时候我们在写项目的时候,用到input或者textarea的时候,可能需要对输入的字数进行一个限制和显示,效果图如下:
在这里插入图片描述
输入文字后的效果图是这样的:
在这里插入图片描述
下面闲话少说 把这个小功能分享给大家,先是wxml:

<view class="conts">
    <textarea class="areas" placeholder='空空如也,快点评论吧' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs"> 
        <text class="currentWordNumber">{{currentWordNumber}}/{{max}}</text>
        <text class="hint">{{texts}}{{num}}{{textss}}</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: 480rpx;
  top: -6rpx;
}
.hint{
   font-size: 28rpx;
   position: absolute;
   top: 130rpx;
   left: 320rpx;
   color: #FF6600;
}

最后是js:

Page({
  data: {
    texts: "至少需要15个字",
    min: 15,//最少字数
    max: 520, //最多字数 (根据自己需求改变) 
    currentWordNumber:0
  },

  //字数限制  
  inputs: function (e) {
    // 获取输入框的内容
    var value = ;
    // 获取输入框内容的长度
    var len = parseInt();
    (len)
    //最少字数限制
    if (len <= )
      ({
        texts: "至少还需要",
        textss: "字",
        num:-len
      })
    else if (len > )
      ({
        texts: " ",
        textss: " ",
        num:''
      })

    ({
      currentWordNumber: len //当前字数  
    });
    //最多字数限制
    if (len > ) return;
    // 当输入框内容的长度大于最大长度限制(max)时,终止setData()的执行

    ()
  }
})

好了,简单的小功能就实现了,虽然只是个简单的功能,但是对于提高用户体验还是很有必要的。对大家有帮助,可以点个关注!