jquery插件——仿新浪微博限制输入字数的textarea

闲来无事翻司徒正美的博客，无意间看到了一篇文章《监听文本框输入》，有一个大发现，原来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>

更多相关文章

随机推荐