JQuery實現回車代替Tab鍵(按回車跳到下一欄)
阿新 • • 發佈:2018-11-27
一個提交按鈕以後,使用者如果按了鍵盤的回車鍵,預設情況下,就會提交這個表單了。這樣對於使用者輸入各個表單專案,使用者體驗很不好,輸入完一個專案,或者用滑鼠選擇下一個專案,或者用鍵盤的Tab鍵選中下一個專案。
二、問題要求:
1:如果當前處於焦點(也就是使用者正在輸入的那個文字框)不是最後一個輸入框,那麼按回車鍵時,將焦點轉移到下一個輸入框;
2:如果當前處於焦點(也就是使用者正在輸入的那個文字框)是最後一個輸入框,那麼按回車鍵時,將請使用者確認後提交表單;
三、基本思路:
1:判斷按鍵是否是回車建, 這個比較好辦,用jQeury中的事件,就可以獲取到當前按的鍵的值了,回車鍵的值是13,比較一下即可。
2:判斷當前處於焦點的輸入框是不是最後一個輸入框。
- $(function() {
- $("form[name='contractForm'] input:text").keypress(function(e) {
- if (e.which == 13) {// 判斷所按是否回車鍵
- var inputs = $("form[name='contractForm']").find(":text"); // 獲取表單中的所有輸入框
- var idx = inputs.index(this); // 獲取當前焦點輸入框所處的位置
- if (idx == inputs.length - 1) {// 判斷是否是最後一個輸入框
- if (confirm("最後一個輸入框已經輸入,是否提交?")) // 使用者確認
- $("form[name='contractForm']").submit(); // 提交表單
- } else {
- inputs[idx + 1].focus(); // 設定焦點
- inputs[idx + 1].select(); // 選中文字
- }
- return false;// 取消預設的提交行為
- }
- });
- });