今天做一个消息管理的功能，消息的最大长度为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 });
这样就基本达到了监听的目的，但是还没有处理字符长度超过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 }
现在基本完成目的。
不过具体代码还有好多兼容性问题，请自行修改测试。