jQuery實現的輸入文字計數功能程式碼
在一些比較人性化的留言回覆功能中,都有這樣的設計,那就是當輸入文字的時候,能夠實現計數功能,可以提示使用者還能能夠輸入多少文字,這樣可以便於使用者選擇更合適的語言描述,下面就是一段能夠實現此功能的程式碼,需要的朋友可以進行一下借鑑。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> fieldset{ width:800px; margin-left:300px; } legend{ font-sixe:16px; } #num{ font-size:28px; font-weight:800 } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#content").focus(function(){ if($(this).val()==this.defaultValue) { $(this).val(""); } }).blur(function(){ if($(this).val()=='') { $(this).val(this.defaultValue); } }) $("#content").keyup(function(){ var words_num = 140 - $(this).val().length; if(words_num < 0) { $("font").css('color','red').text(words_num); $(this).val($(this).val().substring(0,139)) } else{ $("font").text(words_num); } }) }); </script> </head> <body> <fieldset> <legend>釋出框</legend> <form action="#" id="form1"> 您還可以輸入<span id="num"><font color="green">140</font></span>個字 <textarea cols="96" rows="8" id="content">螞蟻部落歡迎您</textarea> <input type="button" id="send" value="釋出"/> </form> </fieldset> </body> </html>
以上程式碼實現了我們的要求,可以實現輸入文字倒數計時效果,下面介紹一下它的實現過程。
一.程式碼註釋:
1.$(function(){}),文件結構完全載入完成再去執行函式中的程式碼。
2.$("#content").focus(function(){
if($(this).val()==this.defaultValue) {
$(this).val("");
}
})
為文字框註冊focus事件處理函式,此函式的功能可以判斷文字框中的內容是否為預設值,如果是則清空。
3.blur(function(){
if($(this).val()=='') {
$(this).val(this.defaultValue);
}
})
為文字框註冊blur事件處理函式,此函式可以判斷文字框的值是否為空,如果是,則將文字框的內容設定為原來預設值。
4.$("#content").keyup(function(){}),為文字框註冊keyup事件處理函式。
5.var words_num = 140 - $(this).val().length,獲取還可以輸入文字的個數。
6.if(words_num < 0) {
$("font").css('color','red').text("0");
$(this).val($(this).val().substring(0,139))
}
如果文字已經超出,那麼就將還可以輸入的文字設定為0,並將其設定為紅色,並刪除超出的文字。
7.else{
$("font").text(words_num);
}
如果沒有超出,則顯示還可以輸入的文字數目。
二.相關閱讀:
(1).focus事件可以參閱jQuery focus事件一章節。
(2).val()函式可以參閱jQuery val()一章節。
(3).blur事件可以參閱jQuery blur事件一章節。
(4).keyup事件可以參閱jQuery keyup事件一章節。
(5).css()函式可以參閱jQuery css()一章節。
(6).text()函式可以參閱jQuery text()一章節。
(7).substring()函式可以參閱javascript String substring()一章節。
相關文章
- Jquery 實現頁面倒數計時的功能jQuery
- Qt 實現文字輸入框,帶字數限制QT
- 文字框文字輸入數量倒計效果
- JavaScript實時計算輸入文字框字元數量JavaScript字元
- jQuery文字框輸入數字彈出格式化層jQuery
- Figma數值輸入框支援拖拽調整功能實現
- Jquery實現的高亮效果程式碼分享jQuery
- jQuery 顯示 input 輸入的密碼!jQuery密碼
- python 實現計算器功能 輸入字串,輸出相應結果Python字串
- 實現高度“聽話”的多行文字輸入框
- 文字框限制輸入字數的JSJS
- 文字框輸入文字倒計詳解
- 純css實現輸入框placeholder動效及輸入校驗的示例程式碼CSS
- JSP程式設計實現使用者自動登入功能示例程式碼JS程式設計
- jquery實現60秒倒數計時jQuery
- 帶自動提示功能的jQuery標籤輸入外掛jQuery
- jQuery Validate限定輸入數字大小的範圍jQuery
- JavaScript 文字框只能輸入數字JavaScript
- 文字框限制輸入字數效果
- HTML在透明輸入框裡新增圖示的實現程式碼HTML
- 使用 jQuery 實現分頁功能jQuery
- Vue中實現輸入框的自動補全功能Vue
- 實現【檢視更多】功能的程式碼
- Js Jquery 實現的按鈕倒數計時整理JSjQuery
- Composition實現科學文字計數器
- 100多行程式碼實現js或者jquery版的類似juejin的預覽圖片功能行程JSjQuery
- 利用VB 指令碼實現TIA 中介面迴圈計數的功能指令碼
- jQuery實現客戶端CheckAll功能jQuery客戶端
- 直播小程式原始碼,react-native自定義文字輸入框原始碼React
- jQuery入門(六)jQuery實現瀑布分頁jQuery
- 直播系統程式碼,輸入時實現密碼顯示與隱藏密碼
- Web 端 實現 app “輸入驗證碼 ”的效果WebAPP
- 通過jquery.cookie.js實現記住使用者名稱、密碼登入功能jQueryCookieJS密碼
- 兩行程式碼輕鬆讓 Java 實現大文字平行計算行程Java
- 簡單幾行程式碼輕鬆實現大文字平行計算行程
- 利用jQuery實現表單驗證功能jQuery
- Redis實現排名功能的示例程式碼CRKCRedis
- 成品直播原始碼推薦,實現文字載入效果 文字跳動原始碼
- jQuery入門(七)jQuery實現按鈕分頁jQuery