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

JavaScript 2019-01-08

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

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

<p><span id="txtNum">0</span>/10</p>
 </div></pre>
</div>
<div class="jb51code">
<pre class="brush: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.f2er.com/tag/gongneng/" target="_blank" class="keywords">功能</a>，存在的问题：当输入英文时正常，但输入<a href="https://www.f2er.com/tag/zhongwen/" target="_blank" class="keywords">中文</a>时，监控的数字会随拼音长度而变化。</p>
<p><h3>2、<a href="https://www.f2er.com/tag/jiejuefangfa/" target="_blank" class="keywords">解决方法</a>： </h3></p>
<p>compositionstart 事件触发于一段<a href="https://www.f2er.com/tag/wenzi/" target="_blank" class="keywords">文字</a>的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的<a href="https://www.f2er.com/tag/jianpan/" target="_blank" class="keywords">键盘</a>操作、语音识别或者点击输入法的备选词）。</p>
<p>compositionend 就是对应的就是一段<a href="https://www.f2er.com/tag/wenzi/" target="_blank" class="keywords">文字</a>输入的事件。</p>
<p>这两个<a href="https://www.f2er.com/tag/shuxing/" target="_blank" class="keywords">属性</a>有点类似于“开关”，如：开始进行<a href="https://www.f2er.com/tag/zhongwen/" target="_blank" class="keywords">中文</a>输入的拼音时开关打开，不在改变监测得到的长度数值，完整输入一个或是一串<a href="https://www.f2er.com/tag/wenzi/" target="_blank" class="keywords">文字</a>后，开关<a href="https://www.f2er.com/tag/guanbi/" target="_blank" class="keywords">关闭</a>，得到监测的数值长度。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
var txt = document.getElementById("txt");
 var txtNum = document.getElementById("txtNum");
 var sw = false; //定义<a href="https://www.f2er.com/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.f2er.com/tag/hanshu/" target="_blank" class="keywords">函数</a>
 if(sw == false){ //只有开关<a href="https://www.f2er.com/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="brush: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:

methods:

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

实时监控文本框输入字数

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支持第三个参数...

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其他强类型语言...

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提交） 2.资源...

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是须知的必须有...