JQuery實現回車代替Tab鍵
一、問題情境:
對於一個網頁上的表單,放置了一個提交按鈕以後,使用者如果按了鍵盤的回車鍵,預設情況下,就會提交這個表單了。這樣對於使用者輸入各個表單專案,會很不方便,輸入完一個專案,或者用滑鼠選擇下一個專案,或者用鍵盤的Tab鍵選中下一個專案。
二、問題要求:
1:如果當前處於焦點(也就是使用者正在輸入的那個文字框)不是最後一個輸入框,那麼按回車鍵時,將焦點轉移到下一個輸入框;
2:如果當前處於焦點(也就是使用者正在輸入的那個文字框)是最後一個輸入框,那麼按回車鍵時,將請使用者確認後提交表單;
三、基本思路:
1:判斷按鍵是否是回車建, 這個比較好辦,用jQeury中的 keypress 事件,就可以獲取到當前按的鍵的值了,回車鍵的值是13,比較一下即可。
2:判斷當前處於焦點的輸入框是不是最後一個輸入框。
四、實現方法:
下面是具體的程式碼,首先是非常簡單的HTML程式碼,可以看到,一個form元素,裡面有三個輸入框,和一個提交按鈕,輸入框分別設定了id屬性。
1 |
<form id="myform"> |
接下來是Javascript程式碼了:
1 |
|
五、具體解釋上述程式碼:
第1行:說明一下程式碼在頁面完全裝入瀏覽器以後執行。
第3行:對錶單中的輸入框設定keypress事件,注意引數中函式帶有一個引數,將通過它獲取當前按鍵的數值。
第5行:判斷是否是回車鍵,如果不是,則不作任何處理,如果是怎進入下面的程式碼。
第7行:獲取表單中的所有輸入框,以便判斷當前的輸入框是否是最後一個。
第8行:獲取當前輸入框在扁擔的多有輸入框中處於第幾個。
第10行:判斷是否是最後一個輸入框。
第12-13行:如果是最後一個,那麼顯示一個確認框,如果使用者確認,則提交表單
第17-18行:如果不是最後一個,那麼將下一個輸入框設定為焦點,並將其中的文字選中
第21行:取消預設的提交表單操作。
六、問題小結:
1:可以看出,jQeury對我們寫前段程式,確實非常方便,可以說jQeury的出現,改變了我們寫Javascript程式的方式,就像C語言的出現,我們不再用匯編那樣一個位元組一個位元組計算記憶體。
2:從效率角度,第7行程式碼,可以放到第3行的前面,這樣,就不用每次都搜尋一次DOM元素,不過實際體驗不出速度的變化。