当开发一个具有 textarea 输入框的表单时，有时候我们希望限制用户输入的字符数量。在这种情况下，可以使用 jQuery 来实现字符限制。下面就是基于 jQuery 来限制 textarea 输入字数的方法。
1. 实现过程
- 引入jQuery库
在 head 标签内引入 jQuery 库，确保其加载成功。
html
<head>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>
- 编写 HTML 结构
在页面添加一段 textarea 输入框的 HTML 代码。设置 ID 为 'text'，下面就以该 ID 进行写作。
```html
```
- 编写 jQuery 代码
在文本区域内添加 jQuery 代码，使用 keyup 事件来获取文本区域内的字符数量与限制的数量进行判断。如果超过规定数量，则停止输入。
javascript
$(document).ready(function () {
var maxNum = 100; // 限制的字符数量
$("#text").keyup(function () {
var len = maxNum - $(this).val().length;
if (len < 0) {
$(this).val($(this).val().substring(0, maxNum));
}
$("#textNum").html(len); // 显示剩余字符数量
});
});
上面这段代码主要实现了：
- 限制了输入文本的最大值为 100 个字符；
- 每次输入弹起后，获取当前已输入字符的数量；
- 如果字符总数超过 100，截取最后 100 个字符；
-
显示当前的字符计数。
-
显示计数器
在页面添加一个用于显示字符数量的 span 标签，设置 ID 为 'textNum'。
```html
还可以输入100个字符
```
在上面的 jQuery 代码中会根据输入内容实时修改该计数器的值。
2. 示例说明
下面我们通过两个实例来具体说明如何使用 jQuery 实现字符限制。
示例一
下面为一个简单的表单，包含了一个只允许输入 50 个字符的文本区域。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery实现文本框输入字数限制</title>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form>
<p>请输入50个字符以内的内容：</p>
<textarea id="text" rows="5" cols="30" maxlength="50"></textarea>
<br />
<p>还可以输入<span id="textNum">50</span>个字符</p>
</form>
<script type="text/javascript">
$(document).ready(function () {
var maxNum = 50;
$("#text").keyup(function () {
var len = maxNum - $(this).val().length;
if (len < 0) {
$(this).val($(this).val().substring(0, maxNum));
}
$("#textNum").html(len);
});
});
</script>
</body>
</html>
示例二
下面是一个更加完整的实现，包含了多个输入框的字符限制，计数器可以同时显示。可以通过修改上面代码中的数值设置不同的限制，以实现你想要限制的字数上限。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery实现文本框输入字数限制</title>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h3>请填写表单</h3>
<form action="submit.php" method="post">
<p>用户名：</p>
<input type="text" name="username" />
<br />
<p>密码：</p>
<input type="password" name="password" />
<br />
<p>介绍（在50字以内）：</p>
<textarea id="text" rows="5" cols="30" maxlength="50"></textarea>
<br />
<p>还可以输入<span id="textNum">50</span>个字符</p>
<br />
<p>
<input type="submit" value="提交" />
</p>
</form>
<script type="text/javascript">
$(document).ready(function () {
// 字符限制
var maxNum = 50;
$("#text").keyup(function () {
var len = maxNum - $(this).val().length;
if (len < 0) {
$(this).val($(this).val().substring(0, maxNum));
len = 0;
}
$("#textNum").html(len);
});
// 多个计数器
$("input[type='text'], input[type='password'], textarea").each(function () {
$(this).before("<span class='tip'></span>");
});
// 绑定菜单事件
$("input[type='text'], input[type='password'], textarea").on("focus", function () {
$(this).siblings(".tip").html("<i class='fa fa-pencil-square-o'></i>");
});
$("input[type='text'], input[type='password'], textarea").on("blur", function () {
$(this).siblings(".tip").html("");
});
});
</script>
</body>
</html>
在这个示例中，我们添加了一个显示图标的提示，让用户更加易于理解。无论在哪种情况下，对于表单的限制都将使您的应用程序更加友好和易于维护。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现限制textarea输入字数的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 