问题描述:监测输入框的字数时,对于英文输入,直接读取event.target.value.length即为文本的长度;
当输入汉字时,由于需要借助输入法输入,当输入汉字过程中,监测 event.target.value.length,当文字未敲入时,统计的字数是已经键入的字数加正在键入的字母的数量;敲击空格,键入汉字后,统计的字数才会变成汉字的数量。
例如:hanzi,字数为5;按下空格,确定输入‘汉字’两个字后,字数变为2
这显然不是我们的期望,下面给出解决方法。
//html
<textarea id='m-cont' ></textarea>
//js
let isCh = false; //用来标识当前输入是否在用输入法输入汉字;
const ct = document.getElementById('m-cont');
ct.addEventListener('keydown', function (e) {
e.keyCode == 229 && (isCh = true); //keydown事件的触发:如果keyCode为229,则说明用户正在使用输入法敲入汉字;
});
ct.addEventListener('keyup', function (e) {
if (e.keyCode == 32 && isCh) {
//keyup事件会真实获取keyCode,当用户正在敲入汉字,而且用户输入了空格,键入了汉字,则获取此时的长度;
isCh = false;
console.log( e.target.value.length);
} else if (!isCh) {
//当用户没有借助输入法,则可直接获取字数
console.log( e.target.value.length);
}
});