JQuery Charcount是一款非常實用的Jquery插件,它可以幫助Web開發者很方便地對輸入框里的文本進行字符計數。
$(document).ready(function(){ $('#textarea').charcount({ //設置最大輸入字數 maxChar: 100, //顯示在輸入框下方的字符計數器 indicator: 'span.counter', //顯示長度超限時的錯誤提示 warning: '糟糕,你輸入的字符數已經超過了最大數量!', //觸發事件 cssWarning: 'warning', cssExceeded: 'exceeded', //是否出現在插件中的計數器上面 placement: 'top', //自定義計數器 onExceed: function(count) { alert('輸入字數已超過'+count+'字'); } }); });
其中,我們可以通過設置maxChar屬性來定義輸入框中最多可以輸入多少個字符,如果超過了這個限定數量,就會出現上面提到的cssWarning和cssExceeded屬性所設置的警告和錯誤信息。而indicator屬性則是用于指定在輸入框下方展示計數的元素,placement屬性則是用來決定計數器出現的位置。
最后,通過預定制的onExceed回調函數,我們甚至可以在輸入字符超過限定數量的時候,彈出一個自定義的提示框,實現更好地交互效果。