1. 程式人生 > >JQuery實現回車代替Tab鍵

JQuery實現回車代替Tab鍵

一、問題情境:

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

二、問題要求:

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

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

三、基本思路:

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

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

四、實現方法:

下面是具體的程式碼,首先是非常簡單的HTML程式碼,可以看到,一個form元素,裡面有三個輸入框,和一個提交按鈕,輸入框分別設定了id屬性。

1
2
3
4
5
6
7
8
9
<form id="myform">
 
<label>first name : </label><input type="text" id="firstName" name="firstName" />
<label>last name : </label><input type="text" id="laseName" name="laseName" />
<label>addess : </label><input type="text" id="address" name="address" />
 
<input type="submit" value="submit" />
 
</form>

接下來是Javascript程式碼了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
        $(
function
(
)

{
$( "#myform input:text" ) .keypress ( function ( e)
{
if ( e.which == 13 ) //判斷所按是否回車鍵
{
var inputs = $( "#myform" ) .find ( ":text" ) ; //獲取表單中的所有輸入框

var idx = inputs.index ( this ) ; //獲取當前焦點輸入框所處的位置
 
if ( idx == inputs.length - 1 ) // 判斷是否是最後一個輸入框
{
if ( confirm ( "最後一個輸入框已經輸入,是否提交?" ) ) //使用者確認
$( "#myform" ) .submit ( ) ; //提交表單
}
else
{
inputs[ idx + 1 ] .focus ( ) ; //設定焦點
inputs[ idx + 1 ] .select ( ) ; //選中文字
}
 
return false ;//取消預設的提交行為
}
} ) ;
} ) ;

五、具體解釋上述程式碼:

第1行:說明一下程式碼在頁面完全裝入瀏覽器以後執行。
第3行:對錶單中的輸入框設定keypress事件,注意引數中函式帶有一個引數,將通過它獲取當前按鍵的數值。
第5行:判斷是否是回車鍵,如果不是,則不作任何處理,如果是怎進入下面的程式碼。
第7行:獲取表單中的所有輸入框,以便判斷當前的輸入框是否是最後一個。
第8行:獲取當前輸入框在扁擔的多有輸入框中處於第幾個。
第10行:判斷是否是最後一個輸入框。
第12-13行:如果是最後一個,那麼顯示一個確認框,如果使用者確認,則提交表單
第17-18行:如果不是最後一個,那麼將下一個輸入框設定為焦點,並將其中的文字選中
第21行:取消預設的提交表單操作。

六、問題小結:

1:可以看出,jQeury對我們寫前段程式,確實非常方便,可以說jQeury的出現,改變了我們寫Javascript程式的方式,就像C語言的出現,我們不再用匯編那樣一個位元組一個位元組計算記憶體。

2:從效率角度,第7行程式碼,可以放到第3行的前面,這樣,就不用每次都搜尋一次DOM元素,不過實際體驗不出速度的變化。