如何使用 jQuery 限制文本区域(textarea)的字符输入数量?
假设文本区域允许输入的字符总数为 N，用户已输入 M 个字符，即 N > M。此时，文本区域还剩下 (N-M) 个字符可供输入。当 (N-M) 变为 0 时，就不应该再允许输入字符。本文将使用 jQuery，通过三个不同的示例来演示如何限制文本区域的字符输入。第一个示例使用了文本区域的 maxlength 属性。在示例二中，文本区域在达到所需限制后被禁用;在示例三中，使用 preventDefault 事件来阻止在达到指定限制后继续输入字符。
示例 1:使用 jQuery 和 maxlength 属性限制文本区域的字符输入
所需步骤
步骤 1 - 创建一个 HTML 文件并开始编写代码。在 script 标签中包含所需的 jQuery 库。
步骤 2 - 在 body 标签内创建一个带有 id 和 name 属性的文本区域。
步骤 3 - 将此文本区域的 maxlength 属性设置为 25。
步骤 4 - 创建一个 pre 标签并为其指定一个类名。
剩余字符数将显示在此处。
步骤 5 - 在 script 标签内编写 jQuery 函数。在 jQuery 函数中，首先将 totalcharacters 和 maxlength 的值设置为相等。持续统计剩余输入的字符数和限制值。同时在 pre 标签内显示结果。
步骤 6 - 在浏览器中加载 HTML 文件并检查结果。
步骤 7 - 在文本区域中输入字符。检查是否达到 25 个字符的限制后无法继续输入。
HTML 文件代码
<!-- How to limit character input in textarea including count in jQuery ? -->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var totalchar = 25;
$('textarea').keydown(function () {
var leftchars = totalchar - $(this).val().length;
$('.remaining').text(leftchars);
});
});
</script>
</head>
<body>
<center>
<h2>
Limit the entered characters
</h2>
<textarea id="textarrID1" name="textname1" rows="5" cols="20" maxlength="25"></textarea>
<pre> You can enter <span class="remaining">25</span> more characters </pre>
</center>
</body>
</html>
示例 2:使用 jQuery 和禁用选项限制文本区域的字符输入
所需步骤
步骤 1 - 创建一个 HTML 文件并开始编写代码。在 script 标签内包含所需的 jQuery 库。
步骤 2 - 在 body 标签内，创建一个带有 id 和 name 属性的文本区域。
步骤 3 - 创建一个 pre 标签并为其指定一个类名。剩余字符数将显示在此标签内。
步骤 4 - 在 script 标签内，编写 jQuery 函数。在 jQuery 函数中，首先指定 totalcharacters 值作为限制字符数。持续统计剩余字符数和限制字符数。同时在 pre 标签中显示结果。
步骤 5 - 添加一个条件，当达到限制时禁用文本区域。
步骤 6 - 在浏览器中加载 HTML 文件并检查结果。
步骤 7 - 在文本区域中输入字符。检查达到限制后文本区域是否被禁用。
HTML 文件代码
<!-- How to limit character input in textarea including count in jQuery ? -->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var totalchar = 25;
$('textarea').keydown(function () {
var leftchars = totalchar - $(this).val().length;
$('.remaining').text(leftchars);
if (leftchars == 0){
document.getElementById('textarrID1').disabled = true;
}
});
});
</script>
</head>
<body>
<center>
<h2>
Limit the entered characters
</h2>
<textarea id="textarrID1" name="textname1" rows="5" cols="20" ></textarea>
<pre> You can enter <span class="remaining">25</span> more characters </pre>
</center>
</body>
</html>
示例 3:使用 jQuery 和 event.preventDefault() 限制文本区域的字符输入
所需步骤
步骤 1 - 创建一个 HTML 文件并开始编写代码。在 script 标签内引入所需的 jQuery 库。
步骤 2 - 在 body 标签内创建一个带有 id 和 name 属性的文本区域。
步骤 3 - 创建一个 pre 标签并为其指定一个类名。剩余字符数将显示在此标签内。
步骤 4 - 在 script 标签内编写 jQuery 函数。在 jQuery 函数中，首先指定 totalcharacters 值作为限制字符数。持续统计剩余字符数和限制字符数。同时在 pre 标签中显示结果。
步骤 5 - 添加一个条件，并在达到限制时调用 `event.preventDefault()`。
步骤 6 - 在浏览器中加载 HTML 文件并检查结果。
步骤 7 - 在文本区域中输入字符。检查是否在达到指定限制后无法输入更多字符。
HTML 文件代码
<!-- How to limit character input in textarea including count in jQuery ? -->
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var totalchar = 25;
$('textarea').keydown(function (event) {
var leftchars = totalchar - $(this).val().length;
$('.remaining').text(leftchars);
if (leftchars == 0){
event.preventDefault();
}
});
});
</script>
</head>
<body>
<center>
<h2>
Limit the entered characters
</h2>
<textarea id="textarrID1" name="textname1" rows="5" cols="20" ></textarea>
<pre> You can enter <span class="remaining">25</span> more characters </pre>
</center>
</body>
</html>
结论
本文通过三个不同的示例，展示了如何限制文本区域(textarea)中可输入的字符数。第一个示例介绍了使用文本区域最大长度(maxlength)的方法。第二个示例展示了在达到字符数限制后禁用文本区域。第三个示例则展示了如何阻止默认事件触发。
