js实时监控文本框输入字数的实例代码

需求：实时监控文本输入框的字数，并加以限制

1、实时监控当前输入字数，直接使用onkeyup事件方法，给输入框加maxlength属性限制长度。如：

rush:xhtml;">

<p><span id="txtNum">0</span>/10</p> </div></pre> </div> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> var txt = document.getElementById("txt"); var txtNum = document.getElementById("txtNum"); txt.addEventListener("keyup",function(){ txtNum.textContent = txt.value.length; })</pre> </div> <p>此时已可以完成基本的监控<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>，存在的问题：当输入英文时正常，但输入<a href="https://www.jb51.cc/tag/zhongwen/" target="_blank" class="keywords">中文</a>时，监控的数字会随拼音长度而变化。</p> <p><h3>2、<a href="https://www.jb51.cc/tag/jiejuefangfa/" target="_blank" class="keywords">解决方法</a>： </h3></p> <p>compositionstart 事件触发于一段<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的<a href="https://www.jb51.cc/tag/jianpan/" target="_blank" class="keywords">键盘</a>操作、语音识别或者点击输入法的备选词）。</p> <p>compositionend 就是对应的就是一段<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>输入的事件。</p> <p>这两个<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>有点类似于“开关”，如：开始进行<a href="https://www.jb51.cc/tag/zhongwen/" target="_blank" class="keywords">中文</a>输入的拼音时开关打开，不在改变监测得到的长度数值，完整输入<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>或是一串<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>后，开关<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>，得到监测的数值长度。</p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> var txt = document.getElementById("txt"); var txtNum = document.getElementById("txtNum"); var sw = false; //定义<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>的开关 txt.addEventListener("keyup",function(){ if(sw == false){ countTxt(); } }); txt.addEventListener("compositionstart",function(){ sw = true; }); txt.addEventListener("compositionend",function(){ sw = false; countTxt(); }); function countTxt(){ //计数<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a> if(sw == false){ //只有开关<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>时，才赋值 txtNum.textContent = txt.value.length; } }</pre> </div> <p><h3>在vue中的写法： </h3></p> <p><span style="background-color: #ccffcc"><h3>template:</h3></p> <div class="jb51code"> <pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;"> <textarea name="suggestions-text" id="textarea" cols="30" rows="10" maxlength="300" v-on:keyup="write()" v-on:compositionstart="importStart()" v-on:compositionend="importEnd()" v-model="textContent">

data:

rush:xhtml;"> textContent: '',conterNum: 0,chnIpt: false,

methods:

rush:xhtml;"> write() { let self = this; if (self.chnIpt == false) { self.conterNum = self.textContent.length; } },importStart() { this.chnIpt = true; },importEnd() { this.chnIpt = false; this.write(); }

以上这篇实时监控文本框输入字数的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。