数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 jQuery 中限制 textarea 的字符输入并显示字符计数？
假设允许输入的总字符数为 N，用户已在 textarea 中输入了 M 个字符，其中 N>M。现在只剩下 (N-M) 个字符可以输入。当 (N-M) 变为 0 后，就不允许再输入字符。本文使用 JQuery，通过三个不同的示例说明了如何在 textarea 中限制字符输入的过程。第一个示例使用了 textarea 的 maxlength 属性。第二个示例在达到限制后禁用文本区域，第三个示例使用 preventDefault 事件来阻止在达到指定限制后进一步输入字符。
示例 1：使用 Jquery 和 maxlength 属性限制 textarea 中的字符输入
所需步骤
步骤 1 − 创建一个 html 文件并开始编写代码。在 script 标签内包含 jQuery 所需的库。
步骤 2 − 在 body 标签内，创建一个具有 id 和 name 属性的 textarea。
步骤 3 − 为此 textarea 指定 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 和禁用选项限制 textarea 中的字符输入
所需步骤
步骤 1 − 创建一个 html 文件并开始编写代码。在 script 标签内包含 jQuery 所需的库。
步骤 2 − 在 body 标签内，创建一个具有 id 和 name 属性的 textarea。
步骤 3 − 创建一个 pre 标签并为其指定一个类名。剩余可输入字符数将显示在此标签内。
步骤 4 − 在 script 标签内，编写 jQuery 函数。在 jQuery 函数中，首先为限制指定 totalcharacters 值。持续计算剩余可输入字符数和限制。并将结果显示在 pre 标签中。
步骤 5 − 添加一个条件，在达到限制时禁用 textarea。
步骤 6 − 在浏览器中加载 HTML 文件并检查结果。
步骤 7 − 在文本区域中输入字符。检查在达到限制后 textarea 是否被禁用。
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() 限制 textarea 中的字符输入
所需步骤
步骤 1 − 创建一个 html 文件并开始编写代码。在 script 标签内包含 jQuery 所需的库。
步骤 2 − 在 body 标签内，创建一个具有 id 和 name 属性的 textarea。
步骤 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>
结论
本文通过三个不同的示例，说明了如何在 HTML 和 JQuery 中限制 textarea 中输入的字符数。首先介绍了使用 textarea 的 maxlength 属性的方法。在第二个示例中，在达到限制后禁用 textarea，在第三个示例中，阻止了默认事件。
2K+ 浏览量
