您的位置：首页 > Web前端 > JQuery

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

2013-05-25 13:21 555 查看

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

// $('#test').limitTextarea({
maxNumber:100, //最大字数
position:'bottom', //提示文字的位置，top：文本框上方，bottom：文本框下方
onOk:function(){
$('#test').css('background-color','white');
}, //输入后，字数未超出时调用的函数
onOver:function(){
$('#test').css('background-color','lightpink');
} //输入后，字数超出时调用的函数
});
// ]]>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航