jQuery maxlength文本字數限制插件

2019-11-21 00:34:11

字體：大中小

來源：轉載

供稿：網友

實現這個效果有很多方法,這里就介紹一種jQuery插件maxlength,它的使用非常簡單,讓我們先看看演示:
jquery maxlength演示地址
演示代碼打包下載
看看Demo中的重點代碼:
1.載入maxlength.js
<script type="text/javascript" src="maxlength.js"></script>
2.加入函數,Demo中有3個例子,你可以根據實際需要選擇不同的函數,不過最后一個例子對于中文而言是無效的.

復制代碼代碼如下:

 
$(function () { 
$('textarea.limited').maxlength({ 
'feedback' : '.charsLeft', 'useInput' : true 
}); 
$('input.limited').maxlength({ 
'feedback' : '.charsLeft' 
}); 
$('textarea.wordLimited').maxlength({ 
'words': true, 
'feedback': '.wordsLeft', 'useInput' : true 
}); 
}); 

3.調用

復制代碼代碼如下:

 
<form action=""> 
<p>可以輸入 <span class="charsLeft">20</span> 個字符</p> 
<textarea class="limited"></textarea> 
<input type="hidden" name="maxlength" value="20" /> 
</form> 
<form action=""> 
<p>可以輸入 <span class="charsLeft">10</span> 個字符</p> 
<input maxlength="10" class="limited" /> 
</form> 

一些必要的解釋:
'useInput' : true 因為textarea需要借助input來實現,所以當你使用textarea的時候就需要這個參數
'feedback' : '.charsLeft' 是指即時顯示的字數放入 class="charsLeft " 的容器中
input中設置最大數值直接用 maxlength="10"
textarea中的大數值需要設置與其對應input的value數值 value="20"