jQuery实现实时显示字符数

浏览数：20 / 时间：2015年06月09日

今天做一个消息管理的功能，消息的最大长度为500，用户自行输入。

因为这属于短消息，可以在用户输入过程中实时显示剩余字符数，用jQuery来实现。

思路是在用户输入过程（既文本框获取焦点后）中监听文本框内容变化，获取内容长度，显示给用户。

其中有两个难点：

1、监听函数

2、开始监听和取消监听的时机

关于这两个问题可以用setInterval来解决，文本框获取焦点开始监听，失去焦点停止监听。

这样的优点是不管用户是输入还是粘贴，都可以监听。

 1 ///监听函数
 2  2 function avai() {
 3  3           var len = 500 - $(‘#content‘).val().trim().length;
 4  4           $(‘#available‘).val("剩余字符空间:" + len + "/500");
 5  5 
 6  6 }
 7  7 ///文本框获取焦点
 8  8             ///启动计时器
 9  9             ///开始监听
10 10             $(‘#content).focus(
11 11                 function () {
12 12                    interval = setInterval(avai, 100);
13 13                 });
14 14  
15 15  
16 16 ///文本框失去焦点
17 17             ///关闭计时器
18 18             ///停止监听
19 19  
20 20             $(‘# content).blur(
21 21                 function () {
22 22                    clearInterval(interval);
23 23                 });

View Code

这样就基本达到了监听的目的，但是还没有处理字符长度超过500的功能。所以修改监听函数如下：

 1 ///监听函数
 2 function avai() {
 3   var len = 500 - $(‘#content‘).val().trim().length;
 4       $(‘#available‘).val("剩余字符空间:" + len + "/500");
 5                     if (len <= 0) {
 6                                   //超过长度之后截取0-499个字符重新赋给文本框
 7                            var str = $(‘#content).text().trim().substr(0,499);
 8                            $(‘#content‘).val(str);
 9                            //更新len
10                           len = 500 - $(‘#<%= this.txt_con.ClientID %>‘).val().trim().length;
11             $(‘#available‘).val("剩余字符空间:" + len + "/500");
12 }
13 }