主要用的是原生的监听。先上图
具体实现:
html:
<input type="text" id="inputlenght" maxlength="10">
<p class="lenght">0/10</p
js:
var flag = true
var inputId = document.getElementById('inputlenght');
var lenght = document.getElementsByClassName('lenght')
// 当输入汉字时
inputId.addEventListener('compositionstart', function () {
flag = false
})
// 结束输入汉字时
inputId.addEventListener('compositionend', function () {
flag = true
})
// 监听输入
inputId.addEventListener('input', function (e) {
// 会在 compositionend前一点执行 所以延迟一点
setTimeout(() => {
console.log(!flag);
if (!flag) return // 输入汉字,不统计字母数
var len = e.target.value.length;
lenght[0].innerHTML = len + '/ 10'
}, 200);
})