限制文本框输入字符数
2020-08-27 本文已影响0人
_重案组之虎
最终代码
复制即可使用，注意引入jq
<body>
<input type="text" id="ipt">
</body>
<script src="./jquery.js"></script>
<script>
//允许输入5个中文或10个非中文
inputLimit("#ipt", 10)
function inputLimit(dom, maxNum) {
let isInput = true;//是否触发input事件
$(dom).on('compositionstart', function () {
isInput = false;
})
$(dom).on('compositionend', function () {
isInput = true;
isChangeIpt();
})
$(dom).on('input', () => isChangeIpt())
function isChangeIpt() {
let strVal = $(dom).val();
if (!isInput) return;
//==========
let j = getLength(strVal, maxNum);
if (j) $(dom).val(strVal.substring(0, j));
}
//判断当前输入框有没有超过限制，如果超过的话返回第几个开始超过
function getLength(str, num) {
let realLength = 0, len = str.length, charCode = -1;
for (let i = 0; i < len; i++) {
charCode = str.charCodeAt(i);
if (charCode >= 0 && charCode <= 128) {
realLength += 1;
} else {
realLength += 2;
}
if (realLength > num) return i;
}
}
}
</script>
目标：输入框允许输入5个汉字或者10个字符
中文算两个字符，英文算一个
思路
-
起初我想使用input框的一个属性 <label style="color:red">maxlength</label>
但是这个属性无法区分中英文，中文和英文都只算一个，所以放弃这个
-
自己动手，计算输入的字符数
function getLength(str, num) { let realLength = 0, len = str.length, charCode = -1; for (let i = 0; i < len; i++) { charCode = str.charCodeAt(i); if (charCode >= 0 && charCode <= 128) { realLength += 1; } else { realLength += 2; } if (realLength > num) return i; } }通过这个函数，传入input框里的内容和限制的字符数，如果超过限制，则返回从第几位超过
我以为通过这个函数的返回值来判断就行了，但是碰到了一个奇怪的问题
-
但是碰到了输入法的问题
微软自带的输入法在输入中文拼音的时候也触发input事件
882554d9f6b28c5c351e6580db00ab8.png
另一个输入法只在刚开始输入的时候触发这个input事件，只触发一次
866a246ff1289bf7d95cbb8bfae5a89.png
-
解决办法
设定一个值判断是不是输入中文let isInput = true;//是否触发input事件 $(dom).on('compositionstart', function () { isInput = false; }) $(dom).on('compositionend', function () { isInput = true; }) -
解决
最后我在输入中文的时候不执行input事件，只在输入非中文和中文输入结束的时候执行，并通过getLength函数获取输入字符数，通过返回值对数据进行处理即可；代码在最上面，直接复制并引入jq即可使用
