input表单限制输入字数,超出字数提示
时间: 2023-09-25 09:10:08 浏览: 350
输入框字数限制
4星 · 用户满意度95%
你可以通过JavaScript实现这个功能。你可以为输入框添加一个事件监听器,监听输入事件,当输入的字符数量超过限制时,就显示提示信息。
以下是一个示例代码:
HTML代码:
```
<label for="input">输入:</label>
<input type="text" id="input" maxlength="10">
<span id="message"></span>
```
JavaScript代码:
```
const input = document.getElementById('input');
const message = document.getElementById('message');
const maxLength = input.getAttribute('maxlength');
input.addEventListener('input', () => {
const currentLength = input.value.length;
if (currentLength > maxLength) {
message.textContent = `最多只能输入 ${maxLength} 个字符`;
} else {
message.textContent = '';
}
});
```
在上面的代码中,我们首先获取了输入框和提示信息的引用,然后获取了输入框的最大长度。接着,我们为输入框添加了一个事件监听器,监听输入事件。在事件处理函数中,我们计算当前输入的字符数量,如果超过最大长度,就显示提示信息,否则清空提示信息。
阅读全文