js文字框計陣列件
先上效果圖:
樣式可以自行調整 ，它的功能提供文字框的實時計數，並作出對應的操作，比如現在超出了，點選下面的按鈕後，文字框會閃動兩下，阻止提交。具體例子可以點選demo:http://www.lovewebgames.com/jsmodule/word-count.html，它的原始檔託管在github上：https://github.com/tianxiangbing/word-count
使用方法案例:
<div class="txt-count-container">
<div class="counter"><em>30</em></div>
<textarea name="txt" id="txt" cols="30" rows="10" class="txt">萬色城是一個創業平臺，所有萬色城的網商通過加盟，註冊一個屬於自己的網上商城。推廣自己的商城，銷售商城的商品創造收益。每個網商擁有一個屬於自己的獨立域名。萬色城是國內唯一全部實行“實名制”的網上商城，每一個網商，以自己真實的姓名、照片和信譽，作為誠信經營的保障。</textarea>
</div>
<p><input type="button" value="點選提交" class="click"></p>
<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/word-count.js"></script>
<script>
$(function() {
$(".click").click(function(){
if(!$('.txt').data('overflow') ){
alert('ok')
}
});
$('.txt').WordCount({
max:200,
isOverflowCut: false,
overClass:"over-number",
num:$(" .counter em"),
withButton:".click",
minHeight:100,
overflowCallback: function() {
//this.textBox.addClass('over-number');
//$(".counter em").addClass('over-number');
},
changeCallback: function(num) {
//var n = this.max - num;
//$(" .counter em").html(n);
},
passClallback: function() {
//this.textBox.removeClass('over-number');
//$(".counter em").removeClass('over-number');
},
isByte: true//位元組
});
});
</script>
或者:
var wc = new WordCount();
wc .init({
trigger:$('.txt'),
max:200,
isOverflowCut: false,
overClass:"over-number",
num:$(" .counter em"),
withButton:".click",
minHeight:100,
overflowCallback: function() {
//this.textBox.addClass('over-number');
//$(".counter em").addClass('over-number');
},
changeCallback: function(num) {
//var n = this.max - num;
//$(" .counter em").html(n);
},
passClallback: function() {
//this.textBox.removeClass('over-number');
//$(".counter em").removeClass('over-number');
},
isByte: true//位元組
});
屬性和方法
trigger :string || object
觸發的文字框
max :number
最大長度,如果不傳會去取文字框的maxlength
isOverflowCut :boollen
是否自動擷取文字
overClass :string
超出文字時的樣式,會同時在num上和textbox上新增
num :element
顯示計數的結點
minHeight: number
文字框的最小高度，因為這裡做自適應高度的控制。如不寫，就不自適應。
withButton: element
關聯按鈕
isByte: boollen
是否按位元組數來計算，true時：一個漢字作2個單位長度，false時漢字英文不作區分
方法回撥:
overflowCallback:function(n,textbox,max)
超出時的回撥，this指向當前物件,n為長度,textbox是文字框結點物件,max為最大長度
changeCallback:function(n,textbox,max)
長度改變時的回撥,n為長度,textbox是文字框結點物件,max為最大長度
passClallback:function(n,textbox,max)
長度通過時的回撥,n為長度,textbox是文字框結點物件,max為最大長度