DIV CSS 佈局教程網

實現這個效果有很多方法,這裡就介紹一種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"