有時候會需要限制欄位填資料的長度,但是只限制格子的長度有點醜,所以用JavaScript來讓使用者瞭解還剩多少字可以輸入,是個不錯的選擇,這老實說很多人做過了,自己做也不會太難,不過網路上有現成的,就用現成的比較省時XD
所以來介紹
Maxlength with jQuery這個好用的jQuery外掛,用法相當簡單,網站上就有很多範例了。
先來個最簡單的範例,下面這格子可以填15個字,超過會自動消掉。
語法這樣而已。
<script type="text/javascript">
$(document).ready(function () {
$('#mybox').maxlength({
maxCharacters: 15
});
});</script>
<input type="textbox" id="mybox">
除此之外,也可以有一些變化,像是下面這樣。
這邊是稍微改了一下字,還有自動隱藏剩餘文字訊息,與字數到的時候跳出訊息,語法也很簡單,就多設定幾個參數。
<script type="text/javascript">
$(document).ready(function () {
$('#alertbox').maxlength({
maxCharacters: 18,
statusText: "個字就爆炸了",
showAlert: true,
alertText: "爆炸啦~~",
slider: true
});
});</script>
<input type="textbox" id="alertbox">
除此之外還有不少功能,像是套上CSS或是呼叫event之類的,不過我沒用上我就不介紹了XD。
原本Maxlength with jQuery預設的文字訊息是英文的,我有抓下來把預設值改成中文訊息,如果有需要可以在這邊抓。
2012/02/07 修正不見得js與下載連結。