jQuery计算textarea中文字数(剩余个数)的小程序

下面是详细的 jQuery 计算 textarea 中文字数（剩余个数）的小程序攻略。

步骤1：编写 HTML 代码

首先，我们需要在 HTML 中创建一个 textarea 元素，用于输入文字。并且添加一个 span 元素，用于显示已经输入的文字数和还剩余的文字数。示例代码如下：

<textarea id="content" rows="3" cols="30"></textarea>
<br>
<span id="count">已输入0个字，还剩余500个字</span>

步骤2：编写 jQuery 代码

接下来，我们需要编写 jQuery 代码，通过监听 textarea 的输入事件，计算输入文字的个数，然后更新显示剩余字数的 span 元素的内容。示例代码如下：

$(function(){
    $('#content').on('input', function(){
        var count = $(this).val().length;
        var limit = 500;
        var remain = limit - count;
        if(remain < 0){
            remain = 0;
            $(this).val($(this).val().substr(0, limit));
        }
        $('#count').text('已输入'+count+'个字，还剩余'+remain+'个字');
    });
});

步骤3：预览效果

将以上代码粘贴到一个 HTML 文件中，并使用浏览器打开该文件，你将看到一个含有 textarea 和显示剩余字数的 span 的页面。当你在 textarea 中输入文字时，剩余字数会实时更新。

以下是示例说明：

示例一：默认情况

页面默认显示“已输入0个字，还剩余500个字”，输入“Hello World”，显示“已输入11个字，还剩余489个字”。

示例二：超过字数限制

将变量 limit 的值修改为 10，页面默认显示“已输入0个字，还剩余10个字”，输入“Hello World”，显示“已输入11个字，还剩余0个字”，并自动截取多余的文字。