Jquery 限制文本框输入字数
时间: 2023-09-11 11:11:59 浏览: 100
您可以使用 jQuery 的 keyup 和 keydown 事件来限制文本框输入的字数。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>限制文本框输入字数</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="myInput" maxlength="10">
<div id="remainingChars"></div>
<script>
$(document).ready(function() {
var maxLength = $("#myInput").attr("maxlength");
$("#remainingChars").html(maxLength + " characters remaining");
$("#myInput").on("keyup keydown", function() {
var currentLength = $(this).val().length;
var remainingLength = maxLength - currentLength;
$("#remainingChars").html(remainingLength + " characters remaining");
if (remainingLength < 0) {
$(this).val($(this).val().substr(0, maxLength));
}
});
});
</script>
</body>
</html>
```
在上面的示例代码中,我们将文本框的最大长度设置为10。然后我们使用 jQuery 的 keyup 和 keydown 事件来监听用户在文本框中输入的内容。在事件处理程序中,我们获取当前输入内容的长度,并计算出剩余可输入的字符数。如果用户输入的字符数超过了最大长度,我们就截取前面的字符,保证输入内容不会超过最大长度。最后,我们将剩余可输入字符数显示在页面上。
阅读全文