(function($){
$.fn.limitTextarea = function(opts){
var defaults = {
maxNumber:140,//允许输入的最大字数
position:'top',//提示文字的位置,top:文本框上方,bottom:文本框下方
onOk:function(){},//输入后,字数未超出时调用的函数
onOver:function(){}//输入后,字数超出时调用的函数
}
var option = $.extend(defaults,opts);
this.each(function(){
var _this = $(this);
var info = '<div id="tip">您可以输入<b>' + (option.maxNumber - _this.val().length + 7) + '</b>个字</div>';
var fn = function(){
var extraNumber = option.maxNumber - _this.val().length;
var $info = $('#tip');
if(extraNumber>=0){
$info.html('还可以输入<b>'+extraNumber+'</b>个字');
option.onOk();
}
else{
$info.html('已经超出<b style="color:red;">'+(-extraNumber)+'</b>个字');
option.onOver();
}
};
switch(option.position){
case 'top' :
_this.before(info);
break;
case 'bottom' :
default :
_this.after(info);
}
//绑定输入事件监听器
if(window.addEventListener) { //先执行W3C
_this.get(0).addEventListener("input", fn, false);
} else {
_this.get(0).attachEvent("onpropertychange", fn);
}
if(window.VBArray && window.addEventListener) { //IE9
_this.get(0).attachEvent("onkeydown", function() {
var key = window.event.keyCode;
(key == 8 || key == 46) && fn();//处理回退与删除
});
_this.get(0).attachEvent("oncut", fn);//处理粘贴
}
});
}
})(jQuery)
调用函数:
$("#replyTxta").limitTxta({
maxNumber: 70, //最大字数
position: 'bottom', //提示文字的位置,top:文本框上方,bottom:文本框下方
onOk: function () {
$('#replyTxta').css('background-color', 'white'); //输入后,字数未超出时调用的函数
$('#sendBtn').attr('disabled', false);
},
onOver: function () {
$('#replyTxta').css('background-color', 'lightpink'); //输入后,字数超出时调用的函数,这里把文本区域的背景变为粉红色
$('#sendBtn').attr('disabled', true);
}
});