JS 实现:输入框最多只能只能输入50个字符(汉字25个,英文50个),超出之后不能再输入,并给提示
时间: 2023-12-09 20:03:29 浏览: 130
可以使用 JavaScript 来实现输入框的字符数限制和提示,具体实现如下:
```html
<input type="text" id="input" oninput="limitInput(this)" maxlength="50" />
<script>
function limitInput(input) {
// 获取输入框的值
let value = input.value;
// 计算输入框中字符的数量
let len = 0;
for (let i = 0; i < value.length; i++) {
let charCode = value.charCodeAt(i);
if (charCode >= 0 && charCode <= 128) {
len += 1; // 英文字符
} else {
len += 2; // 中文字符
}
}
// 如果字符数量超过限制,截取输入框的值
if (len > 50) {
let maxLen = 25; // 汉字25个,英文50个
let truncatedValue = '';
for (let i = 0; i < value.length; i++) {
let charCode = value.charCodeAt(i);
if (charCode >= 0 && charCode <= 128) {
if (maxLen > 0) {
truncatedValue += value[i];
maxLen--;
}
} else {
if (maxLen > 1) {
truncatedValue += value[i];
maxLen -= 2;
}
}
}
input.value = truncatedValue;
alert('输入的字符数超过限制!');
}
}
</script>
```
代码中使用了 oninput 事件监听输入框的输入,当输入框的值发生变化时,就会调用 limitInput 函数进行字符数限制。在 limitInput 函数中,首先获取输入框的值,然后通过循环计算字符串中字符的数量,根据汉字和英文的数量限制来截取字符串,并给出提示信息。最后,将截取后的字符串赋值给输入框的值,实现了输入框的字符数限制和提示。
阅读全文