闲来无事翻司徒正美的博客，无意间看到了一篇文章《监听文本框输入》，有一个大发现，原来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()方法即可。有四个参数可以传入，分别做了注释。效果呢，就和新浪微博差不多，只不过我这里没有加样式：
插件下载地址：https://files.cnblogs.com/lvdabao/jquery.limitTextarea.js
若发现什么bug，记得给我说一声哦~