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

    闲来无事翻司徒正美的博客,无意间看到了一篇文章《监听文本框输入》,有一个大发现,原来js中竟有oninput这样的事件,在文本框的输入、退格、空格、粘贴等操作均能触发,利用这个事件就可以动态捕捉用户的输入情况。记得以前做动态监测输入,都是用onkeydown或onkeyup,太土了,现在直接用这个吧。不过呢,有点兼容性问题,没错,就是IE(每次都是你!),而且IE9和其他版本的IE还不太一样。还好正美已经在他的文章中进行了兼容性处理,可以拿来直接用了。

    本文的重点,就是想利用这个事件来写一个jquery插件,限制字数的textarea。相信你已经不陌生了,像新浪微博:

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,记得给我说一声哦~

你可能感兴趣的:(jquery插件)