Demo:
<html>
<head>
<title>limitWord Demo</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/limitWord.js"></script>
<script type="text/javascript">
$(function(){
$(".wrap").limitWord(10,"您的输入超出了限制");
});
</script>
<style type="text/css">
#limitedContent{
text-align:left;
}
</style>
</head>
<body>
<div class="wrap">
<!-- <textarea id="limitedContent"></textarea> -->
<input type="text" class="limitedContent">
<span id="msg"></span>
</div>
</body>
</html>
limitWord.js:
/**
* @author mchange
* @description 该控件用于对输入的内容进行字数统计和字数限制。
* @property {int} [limitCount] [限制的字数]
* @property {string} [msg] [超过限制的字数所提示的文字]
* @email:tzzhongwen@gmail.com
* @declare:个人练习,简陋之极,仅供参考
* 2012-05-02
*/
jQuery.fn.extend({
limitWord:function(limitCount,msg){
var flag = 0;
$("#msg").text("您能输入"+limitCount+"个文字");
$(this).children().filter(".limitedContent").bind('keyup input paste',function(){
var contentLength = $(this).val().length;
if(limitCount >= contentLength){
flag = limitCount - contentLength;
$("#msg").text("您还能输入"+flag+"个文字");
}else{
$(this).val($(this).val().substring(0,limitCount));
$("#msg").text(msg);
}
});
}
});