本文實例講述了jQuery實現簡易的輸入框字數計數功能。分享給大家供大家參考,具體如下:
運行效果圖如下:
具體代碼如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.7.2.min.js"></script></head><body><div class="container"> <input id="abc" value="武林網"><span id="wordCountShow"></span></div><script> $.fn.extend({ wordCount: function (maxLength, wordWrapper) { var self = this; $(self).attr("maxlength", maxLength); showWordCount(); $(this).on("input propertychange", showWordCount); function showWordCount() { curLength = $(self).val().length; var leaveCount = maxLength - curLength; wordWrapper.text(leaveCount + "/" + maxLength); } } }) $(function () { $("#abc").wordCount(10, $("#wordCountShow")); })</script></body></html>
PS:這里再為大家提供幾款帶有字數統計功能的在線工具供大家參考使用:
在線字數統計工具:
http://tools.VeVB.COm/code/zishutongji
在線文本美化排版工具:
http://tools.VeVB.COm/aideddesign/txt_paiban
在線自動排版與轉換工具:
http://tools.VeVB.COm/aideddesign/txt_beaut
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》、《jQuery切換特效與技巧總結》、《jQuery遍歷算法與技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答