实时监控文本框输入字数

发布时间:2019-01-10 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了实时监控文本框输入字数脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

这里写图片描述

<pre class="prettyprint"><code class="language-html hljs "> <span class="hljs-tag"><<span class="hljs-title">div>
<span class="hljs-tag"><<span class="hljs-title">textarea <span class="hljs-attribute">id=<span class="hljs-value">"txt" <span class="hljs-attribute">maxlength=<span class="hljs-value">"10"><span class="hljs-tag"></<span class="hljs-title">textarea>
<span class="hljs-tag"><<span class="hljs-title">p><span class="hljs-tag"><<span class="hljs-title">span <span class="hljs-attribute">id=<span class="hljs-value">"txtNum">0<span class="hljs-tag"></<span class="hljs-title">span>/10<span class="hljs-tag"></<span class="hljs-title">p>
<span class="hljs-tag"></<span class="hljs-title">div>

<pre class="prettyprint"><code class="language-js hljs "> <span class="hljs-keyword">var txt = document.getElementById(<span class="hljs-string">"txt");
<span class="hljs-keyword">var txtNum = document.getElementById(<span class="hljs-string">"txtNum");
txt.addEventListener(<span class="hljs-string">"keyup",<span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(){
txtNum.textContent = txt.value.length;
})

此时已可以完成基本的监控功能,存在的问题:当输入英文时正常,但输入中文时,监控的数字会随拼音长度而变化。 2、解决方法: compositionstart 事件触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)。 compositionend 就是对应的就是一段文字输入的事件。 这两个属性有点类似于“开关”,如:开始进行中文输入的拼音时开关打开,不在改变监测得到的长度数值,完整输入一个或是一串文字后,开关关闭,得到监测的数值长度。

<pre class="prettyprint"><code class="language-html hljs "> var txt = document.getElementById("txt");
var txtNum = document.getElementById("txtNum");
var sw = false; //定义关闭的开关

txt.addEventListener("keyup",function(){
    if(sw == false){
        countTxt();
    }
});
txt.addEventListener("compositionstart",function(){
    sw = true;
});
txt.addEventListener("compositionend",function(){
    sw = false;
    countTxt();
});
function countTxt(){       //计数函数
    if(sw == false){        //只有开关关闭时,才赋值
        txtNum.textContent = txt.value.length;
    }
}</code></pre>

在vue中的写法: template:

<pre class="prettyprint"><code class="language-html hljs "><span class="hljs-tag"><<span class="hljs-title">textarea <span class="hljs-attribute">name=<span class="hljs-value">"suggestions-text" <span class="hljs-attribute">id=<span class="hljs-value">"textarea" <span class="hljs-attribute">cols=<span class="hljs-value">"30" <span class="hljs-attribute">rows=<span class="hljs-value">"10" <span class="hljs-attribute">maxlength=<span class="hljs-value">"300" <span class="hljs-attribute">v-on:keyup=<span class="hljs-value">"write()" <span class="hljs-attribute">v-on:compositionstart=<span class="hljs-value">"importStart()" <span class="hljs-attribute">v-on:compositionend=<span class="hljs-value">"importEnd()" <span class="hljs-attribute">v-model=<span class="hljs-value">"textContent"><span class="hljs-tag"></<span class="hljs-title">textarea>
<span class="hljs-tag"><<span class="hljs-title">p <span class="hljs-attribute">class=<span class="hljs-value">"counterNum">{{conterNum}}/300<span class="hljs-tag"></<span class="hljs-title">p>

data:

<pre class="prettyprint"><code class="language-js hljs ">textContent: <span class="hljs-string">'',conterNum: <span class="hljs-number">0,chnIpt: <span class="hljs-literal">false,

methods:

<pre class="prettyprint"><code class="language-js hljs ">write() {
<span class="hljs-keyword">let self = <span class="hljs-keyword">this;
<span class="hljs-keyword">if (self.chnIpt == <span class="hljs-literal">false) {
self.conterNum = self.textContent.length;
}
},importStart() {
<span class="hljs-keyword">this.chnIpt = <span class="hljs-literal">true;
},importEnd() {
<span class="hljs-keyword">this.chnIpt = <span class="hljs-literal">false;
<span class="hljs-keyword">this.write();
}

作者:rookie.he(kuke_kuke) 博客链接: 欢迎关注支持,谢谢!

总结

以上是脚本之家为你收集整理的实时监控文本框输入字数全部内容,希望文章能够帮你解决实时监控文本框输入字数所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: