微信小程序-实时监控input等组件输入字数

￡神魔★判官ぃ 2023-07-21 08:47 47阅读 0赞

>        今天给小伙伴们分享点啥呢，奥，想到了，昨日不是给小伙伴们分享了一篇有关textare可最大输入字数文章嘛（假装没看到），今天我就在它的基础上，来个画龙点睛，给文本域加个监听，监听用户实时输入字数，好好看好好学，一天一个上分小技巧，择日不如撞日，那我开始啦！

### *不要说了，不要说了，先放DJ，先放Dj...* ###

![20200403123735466.gif][]

>       ***  注意上图右下角！***好，想必看完成品，是不是有点东西呢，感兴趣的小伙伴可以接着往后瞧，瞧不上的嘛，给句肺腑之言，“不看你会后悔的！”，略略略...

页面先定义好一个输入文本域跟一个字数提示语：maxlength设置一个最大值，我是按需求，你们具体业务具体分析哈，接着给它绑定一个bindinput 事件，用于监控字数输入，差不多就好了！

<view class="clear">
           <text style="float: right">{
       {currentWord}}/{
       {maxWord}}(最多可输入500字)</text>
    </view>

好，现在就差最后一步，给绑定事件写个读取字数长度的逻辑了 ；

Page({
      data: {
        //字数限制
        maxWord:500,
        currentWord:0
      },
    
    limitWord:function(e){
        var that = this;
        var value = e.detail.value;
        var wordLength = parseInt(value.length); //解析字符串长度转换成整数。
        if (that.data.maxWord < wordLength) {
          return ;
        }
        that.setData({
          currentWord: wordLength 
        });
      },
    })

parseInt() 函数可解析一个字符串，并返回一个整数。具体用法，

可参考：[https://www.w3school.com.cn/jsref/jsref\_parseInt.asp][https_www.w3school.com.cn_jsref_jsref_parseInt.asp]；

\------------------------------------------------------------------分割线---------------------------------------------------------------

推荐文章：[textarea那些你不为人知的“故事”][textarea]

> ❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
> 
> ❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～
> 
> ❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】
> 
> ❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。

[20200403123735466.gif]: /images/20230528/261da645c2474a0aadacc87c496d8479.png
[https_www.w3school.com.cn_jsref_jsref_parseInt.asp]: https://www.w3school.com.cn/jsref/jsref_parseInt.asp
[textarea]: https://blog.csdn.net/weixin_43970743/article/details/105271005