jQuery实现实时显示字符数

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

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

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

其中有两个难点：

1、  监听函数

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

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

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

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

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

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

现在基本完成目的。

不过具体代码还有好多兼容性问题，请自行修改测试。