input表单限制输入字数,超出字数提示信息
时间: 2023-07-31 22:11:24 浏览: 69
可以通过 JavaScript 来实现对输入框字数的限制和提示信息。下面是一个示例代码:
HTML 代码:
```html
<label for="input-field">请输入内容:</label>
<input type="text" id="input-field" maxlength="10">
<div id="error-message"></div>
```
JavaScript 代码:
```javascript
const inputField = document.getElementById("input-field");
const errorMessage = document.getElementById("error-message");
inputField.addEventListener("input", function() {
const maxLength = inputField.getAttribute("maxlength");
const currentLength = inputField.value.length;
if (currentLength > maxLength) {
errorMessage.textContent = "超出字数限制!";
} else {
errorMessage.textContent = "";
}
});
```
在输入框的标签中,使用 `maxlength` 属性来设置最大的字符数。然后,使用 `addEventListener` 函数来监听输入框的 `input` 事件。在事件处理函数中,通过获取 `maxlength` 和当前输入框的字符数,来判断是否超出了字数限制,并根据情况显示提示信息。