博客

如何在jQuery中限制textarea的字符输入，包括计数

  • Post category:jquery

在jQuery中，可以很方便地对textarea的字数和输入内容进行限制和统计。下面是实现的步骤：

第一步：引入jQuery

在HTML顶部的标签中插入以下语句：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

第二步：编写HTML代码

在HTML body中加入如下代码，创建一个textarea元素：

<textarea id="input_textarea" rows="5" cols="50"></textarea>
<div id="textarea_count"></div>

第三步：编写jQuery代码

添加以下jQuery代码，完成对textarea的字符限制和计数：

$(document).ready(function(){
    $('#input_textarea').on("keyup", function(){
        var content = $(this).val();
        var count = content.length;
        if (count > 100){
            $(this).val(content.substring(0, 100));
            count = 100;
        }
        $('#textarea_count').html(count + "/100"); 
    });
});

代码解释：

  • 通过$(document).ready()，确保文档已经加载完毕再执行代码
  • $('#input_textarea').on("keyup", function(){})表示监听textarea的keyup事件
  • $(this).val()获取textarea的输入内容
  • content.length计算输入内容的长度
  • 如果长度超过100，则使用substring()截取前100个字符，同时将内容重新设置回textarea中
  • $('#textarea_count').html(count + "/100")用于在页面上显示当前输入的字符数和总字符数

示例说明

  1. 使用maxlength属性限制textarea的最大字符数

如果你只需要简单限制textarea的最大字符数，可以使用HTML标签提供的maxlength属性，例如：

<textarea id="input_textarea" rows="5" cols="50" maxlength="100"></textarea>
<div id="textarea_count"></div>

这时就不需要jQuery代码的限制操作了。

  1. 使用CSS样式隐藏输入框右下角的计数器

如果你希望隐藏textarea右下角的字符计数器，可以使用以下CSS样式：

textarea::-webkit-input-placeholder {
color: transparent;
}
textarea + div {
display:none;
}

这里使用CSS选择器，将textarea的placeholder颜色设置为透明，因此计数器就不可见了。而后面的+ div表示隐藏textarea相邻的div元素，即计数器的显示框。

以上就是限制textarea的字符输入和计数的攻略，希望对你有帮助。

Tags: