閑來無事翻司徒正美的博客，無意間看到了一篇文章《監聽文本框輸入》，有一個大發現，原來js中竟有oninput這樣的事件，在文本框的輸入、退格、空格、粘貼等操作均能觸發，利用這個事件就可以動態捕捉用戶的輸入情況。記得以前做動態監測輸入，都是用onkeydown或onkeyup，太土了，現在直接用這個吧。不過呢，有點兼容性問題，沒錯，就是IE（每次都是你！），而且IE9和其他版本的IE還不太一樣。還好正美已經在他的文章中進行了兼容性處理，可以拿來直接用了。
本文的重點，就是想利用這個事件來寫一個jquery插件，限制字數的textarea。相信你已經不陌生了，像新浪微博：
這個插件其實相當簡單，就是對輸入的字數進行一下統計，如果超出了就進行提示，我都懶的說了。直接把使用demo發過來好了：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script src="js/jquery-1.9.1.min.js"></script> <script src="jquery.limitTextarea.js"></script> </head> <body> <textarea id="test" cols="50" rows="5"></textarea> <script> $(function(){ $('#test').limitTextarea({ maxNumber:100, //最大字數 position:'bottom', //提示文字的位置，top：文本框上方，bottom：文本框下方 onOk:function(){ $('#test').css('background-color','white'); }, //輸入后，字數未超出時調用的函數 onOver:function(){ $('#test').css('background-color','lightpink'); } //輸入后，字數超出時調用的函數，這里把文本區域的背景變為粉紅色 }); }); </script> </body> </html>
在你要進行限制的textarea上直接調用limitTextarea()方法即可。有四個參數可以傳入，分別做了注釋。效果呢，就和新浪微博差不多，只不過我這里沒有加樣式：
插件下載地址：http://files.cnblogs.com/lvdabao/jquery.limitTextarea.js
若發現什么bug，記得給我說一聲哦~