文字框輸入完成自動跳入下一個程式碼例項
分享一段程式碼例項,它實現了當文字框內容輸入完成自動跳入下一個的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .input input { display: inline-block; } .input { width: 580px; height: 41px; line-height: 41px; margin-right: 20px; } .input input { border: 1px solid #ccc; width: 100px; height: 40px; outline: none; font-size: 14px; font-weight: inherit; text-align: center; line-height: 40px; color: #000; background: #fff; margin-right: 10px; margin-left: 10px; } .input:first-child { margin-left: 0; } </style> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> <script> $(document).ready(function() { $("#sn1").focus(); $("input[name^='sn']").each(function() { var that = $(this); that.keyup(function() { if(that.val().length === 3){ if (that.val().trim().length < 3) { var TheVal = that.val().trim(); that.val(TheVal) } else { that.next().focus(); } } }) }); }); </script> </head> <body> <div class="input" id="coupon"> <input type="tel" placeholder="紅" name="sn1" maxlength="3" id="sn1"> - <input type="tel" placeholder="包" name="sn2" maxlength="3" id="sn2"> - <input type="tel" placeholder="密" name="sn3" maxlength="3" id="sn3"> - <input type="tel" placeholder="鑰" name="sn4" maxlength="3" id="sn4"> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(document).ready(function() {}),當文件結構完全載入完畢再去執行函式中的程式碼。
(2).$("#sn1").focus(),預設第一個文字框獲取焦點。
(3).$("input[name^='sn']").each(function() {}),遍歷每一個name屬性值以sn開頭的input元素。
(4).var that = $(this),將當前input元素轉換為對應的jQuery物件,並賦值給變數that。
(5).that.keyup(function() {}),為當前input元素註冊keyup事件處理函式。
(6).if(that.val().length === 3)判斷當前文字框的值的長度是否等於3。
(7).if (that.val().trim().length < 3) {
var TheVal = that.val().trim();
that.val(TheVal)
} else {
that.next().focus();
},如果刪除兩端空格之後,長度小於3,那麼就將文字框的值重置為去除空格後的值。
否則的話,當前文字框緊鄰的下一個同輩元素將獲取焦點。
二.相關閱讀:
(1).focus()可以參閱jQuery focus事件一章節。
(2).[name^='sn']可以參閱jQuery [attribute^=value]一章節。
(3).each()可以參閱jQuery each()一章節。
(4).keyup事件可以參閱jQuery keyup事件一章節。
(5).trim()可以參閱javascript trim()一章節。
(6).next()可以參閱jQuery next()一章節。
相關文章
- textarea文字框高度自適應程式碼例項
- 當前文字框高亮效果程式碼例項
- 手機驗證碼自動跳轉下一個輸入框之功能
- jQuery點選文字框清除內容程式碼例項jQuery
- 直播小程式原始碼,react-native自定義文字輸入框原始碼React
- 文字框輸入文字倒計詳解
- Flutter 密碼輸入框 驗證碼輸入框Flutter密碼
- 利用 Angular Directive 和 @HostBinding 實現輸入文字框隨著鍵盤輸入自動變色效果Angular
- 文字框文字輸入數量倒計效果
- QT學習筆記(三)單行文字輸入框與自動補全QT筆記
- JavaScript 文字框只能輸入數字JavaScript
- 文字框限制輸入字數效果
- 直播網站原始碼,安卓防止輸入框自動彈出網站原始碼安卓
- 文字框限制輸入字數的JSJS
- canvas載入效果程式碼例項Canvas
- input輸入框加入限制只能輸入正整數,輸入其他字元會自動清除字元
- 純css實現輸入框placeholder動效及輸入校驗的示例程式碼CSS
- css多行文字垂直居中程式碼例項CSS
- csgo國服啟動項程式碼 csgo國服程式碼在哪輸入Go
- 動態顯示:文字框字數(輸入還剩多少字)
- ant-design輸入框自動獲取焦點
- Objective-C:多行文字輸入框(UITextView)ObjectUITextView
- Axure之解決文字框無法輸入
- 動手寫個數字輸入框3:痛點——輸入法是個魔鬼
- hanlp中文智慧分詞自動識別文字提取例項HanLP分詞
- JavaScript運動框架程式碼例項JavaScript框架
- CSS3文字凹凸效果程式碼例項CSSS3
- JavaScript讀取文字檔案內容程式碼例項JavaScript
- Flutter 驗證碼輸入框Flutter
- Vue中實現輸入框的自動補全功能Vue
- Web聊天工具的富文字輸入框Web
- Qt 實現文字輸入框,帶字數限制QT
- 直播程式,Vue input輸入框回車以後自動重新整理頁面Vue
- 美化滾動條效果程式碼例項
- 輸入框
- CSS3文字陰影效果程式碼例項CSSS3
- JavaScript 點選複製選中文字程式碼例項JavaScript
- 直播平臺開發,動態文字輸出,文字自動輸出
- cad動態輸入框不見了 cad動態輸入框怎麼調出來