1. 程式人生 > >JQuery實現回車代替Tab鍵(按回車跳到下一欄)

JQuery實現回車代替Tab鍵(按回車跳到下一欄)

一個提交按鈕以後,使用者如果按了鍵盤的回車鍵,預設情況下,就會提交這個表單了。這樣對於使用者輸入各個表單專案,使用者體驗很不好,輸入完一個專案,或者用滑鼠選擇下一個專案,或者用鍵盤的Tab鍵選中下一個專案。

二、問題要求:

1:如果當前處於焦點(也就是使用者正在輸入的那個文字框)不是最後一個輸入框,那麼按回車鍵時,將焦點轉移到下一個輸入框;

2:如果當前處於焦點(也就是使用者正在輸入的那個文字框)是最後一個輸入框,那麼按回車鍵時,將請使用者確認後提交表單;

三、基本思路:

1:判斷按鍵是否是回車建, 這個比較好辦,用jQeury中的事件,就可以獲取到當前按的鍵的值了,回車鍵的值是13,比較一下即可。

2:判斷當前處於焦點的輸入框是不是最後一個輸入框。

  1. $(function() {  
  2.     $("form[name='contractForm'] input:text").keypress(function(e) {  
  3.     if (e.which == 13) {// 判斷所按是否回車鍵  
  4.         var inputs = $("form[name='contractForm']").find(":text"); // 獲取表單中的所有輸入框  
  5.         var idx = inputs.index(this); // 獲取當前焦點輸入框所處的位置  
  6.         if (idx == inputs.length - 1) {// 判斷是否是最後一個輸入框  
  7.             if (confirm("最後一個輸入框已經輸入,是否提交?")) // 使用者確認  
  8.             $("form[name='contractForm']").submit(); // 提交表單  
  9.         } else {  
  10.             inputs[idx + 1].focus(); // 設定焦點  
  11.             inputs[idx + 1].select(); // 選中文字  
  12.         }  
  13.         return false;// 取消預設的提交行為  
  14.     }  
  15.     });  
  16. });