微信小程序-實時監控input等組件輸入字數

       今天給小夥伴們分享點啥呢，奧，想到了，昨日不是給小夥伴們分享了一篇有關textare可最大輸入字數文章嘛（假裝沒看到），今天我就在它的基礎上，來個畫龍點睛，給文本域加個監聽，監聽用戶實時輸入字數，好好看好好學，一天一個上分小技巧，擇日不如撞日，那我開始啦！

不要說了，不要說了，先放DJ，先放Dj...

 

        注意上圖右下角！好，想必看完成品，是不是有點東西呢，感興趣的小夥伴可以接着往後瞧，瞧不上的嘛，給句肺腑之言，“不看你會後悔的！”，略略略...

頁面先定義好一個輸入文本域跟一個字數提示語：maxlength設置一個最大值，我是按需求，你們具體業務具體分析哈，接着給它綁定一個bindinput 事件，用於監控字數輸入，差不多就好了！

 <textarea maxlength='500' placeholder-style="color:#5F5F5F;" class="detail" 
 bindblur="bindContentBlur" bindinput='limitWord' value="{{content}}" placeholder='請輸入通知詳情（最多500個字）' name="content"></textarea>

<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；

------------------------------------------------------------------分割線---------------------------------------------------------------

推薦文章：textarea那些你不爲人知的“故事”

❤如果文章對您有所幫助，就在文章的右上角或者文章的末尾點個贊吧！(づ￣ 3￣)づ

❤如果喜歡大白兔分享的文章，就給大白兔點個關注吧！(๑′ᴗ‵๑)づ╭❤～

❤對文章有任何問題歡迎小夥伴們下方留言或者入羣探討【羣號：708072830】

❤鑑於個人經驗有限，所有觀點及技術研點，如有異議，請直接回復討論（請勿發表攻擊言論）。