php输入框字数限制,实时监控文本框输入字数详解

本文主要为大家分享一篇实时监控文本框输入字数的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。

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

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

0/10

var txtNum = document.getElementById("txtNum");

txt.addEventListener("keyup", function(){

txtNum.textContent = txt.value.length;

})

此时已可以完成基本的监控功能，存在的问题：当输入英文时正常，但输入中文时，监控的数字会随拼音长度而变化。

2、解决方法：

compositionstart 事件触发于一段文字的输入之前(类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)。

compositionend 就是对应的就是一段文字输入的事件。

这两个属性有点类似于“开关”，如：开始进行中文输入的拼音时开关打开，不在改变监测得到的长度数值，完整输入一个或是一串文字后，开关关闭，得到监测的数值长度。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;

}

}

在vue中的写法：

template:

{{conterNum}}/300

data:textContent: '',

conterNum: 0,

chnIpt: false,

methods:write() {

let self = this;

if (self.chnIpt == false) {

self.conterNum = self.textContent.length;

}

},

importStart() {

this.chnIpt = true;

},

importEnd() {

this.chnIpt = false;

this.write();

}

相关推荐：