クラスマイクロブログ入力ボックスプラグイン
3500 ワード
/**
*
* ：
* counter id
* max ， 150
* textClass
* normalClass
* errorClass
* 2012/3/8 by
*/
(function($){
$.fn.extend({
weiboInputBox: function(options) { //
var defaults={
counter:"msg", // id
max:150,
textClass:"textClass",
normalClass:"normalClass",
errorClass:"errorClass"
};
var options=$.extend(defaults,options);
return this.each(function() {
var o=options; //
var obj=$(this); //
$("#"+o.counter).addClass(o.textClass)
.html(" <span class='"+o.normalClass+"'>"+o.max+"</span> ");
obj.bind("keypress",function(event){
var l=obj.val().length+1;
var maxlength=obj.attr("maxlength");
if(l>maxlength){
window.event.keyCode=0;
}
});
obj.bind("keyup change",function(event){
var val=obj.val();
var vLength=val.length;
//var addLen=(val.match(/[^\x00-\xff]|[\u4E00-\u9FA5]/g)||'').length; //2 1
var addLen=val.length; //1 1
var num=o.max-Math.ceil((vLength+addLen)/2);
if(num>=0){
$("#"+o.counter).addClass(o.textClass)
.html(" <span class='"+o.normalClass+"'>"+num+"</span> ");
}else{
$("#"+o.counter).addClass(o.textClass)
.html(" <span class='"+o.errorClass+"'>"+Math.abs(num)+"</span> ");
}
});
});
}
});
})(jQuery);IEブラウザの<textarea>タグはmaxlength属性をサポートしていないため、プラグインにpressキーボードイベントを使用し、イベントで文字数をチェックし、上限を超えると強制的にkeyCodeを0に設定し、maxlength属性の目的を達成した.しかし、この方法はコピーや貼り付けにはどうしようもないので、文字列を切り取る方法を使っているのは残念ですが、アイデアを提供してください.
呼び出し時に、カウント領域のコンテナid、例えば
タグを指定すると、カウントの情報が表示されます.
例:
例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<script src="jquery.js"></script>
<script src="weibotextbox.js"></script>
<style type="text/css">
.normal{font-size:14px;color:#000000;}
.text{font-size:18px;color:#0000FF;font-family:Garamond;}
.error{font-size:18px;color:#FF0000;font-family:Garamond;}
</style>
</HEAD>
<BODY>
<div id="counter"></div>
<textarea class="textarea" id="summary" maxlength="20" row="3" col="20">
</textarea>
<script type="text/javascript">
$(document).ready(function(){
$("#summary").weiboInputBox({
counter:"counter",
max:20,
textClass:"normal",
normalClass:"text",
errorClass:"error"
});
});
</script>
</BODY>
</HTML>