jqueryプラグイン-新浪微博制限入力文字数を模したtextarea
詳細
【前言】
特効を記録して,後で講義して説明する.
【本体】
【前言】
特効を記録して,後で講義して説明する.
【本体】
jquery —— textarea
(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="info"><b>' + (option.maxNumber - _this.val().length) + '</b>/'+option.maxNumber+'</div>';
var fn = function() {
var $info = $('#info');
var extraNumber = option.maxNumber - _this.val().length;
if (extraNumber >= 0) {
$info.html('<b>' + extraNumber + '</b>/'+option.maxNumber);
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)
// ；
$(function() {
$('#test').limitTextarea({
maxNumber: 140, //
position: 'bottom', // ，top： ，bottom：
onOk: function() {
$('#test').css('background-color', 'white');
}, // ，
onOver: function() {
$('#test').css('background-color', 'lightpink');
} // ， ，
});
});