點選Enter鍵表切換焦點效果

admin發表於2018-11-24

現在網站都比較追求人性化，比如填寫表單的時候，能夠實現點選回車就可以切換表單元素的焦點，這樣比使用滑鼠進行切換更能讓人接受，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>     
<html>     
<head>     
<meta charset=" utf-8">     
<meta name="author" content="http://www.softwhy.com/" />     
<title>螞蟻部落</title>  
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(function(){
  $('#theform input:text:first').focus();
  var $inp=jQuery('#theform input:text');
  $inp.bind('keydown',function(e){
    var key=e.which;
    if(key==13) {
      e.preventDefault();
      var nxtIdx=$inp.index(this)+1;
      $(":input:text:eq("+nxtIdx+")").focus();
    }
  });
});
</script> 
</head> 
<body> 
<form action="#" id="theform">
<input type="text" name="one"/>
<input type="text" name="two"/>
<input type="text" name="three"/>
</form> 
</body> 
</html>

點選Enter鍵就可以實現切換文字框的焦點效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(function(){})，當文件結構載入完畢再去執行函式中的程式碼。

（2）.$('#theform input:text:first').focus()，使表單中的第一個文字框獲取焦點。

（3）.var $inp=jQuery('#theform input:text')，獲取表單元素下的所有文字框元素集合。

（4）.$inp.bind('keydown',function(e){})，為文字框註冊keydown事件處理函式。

（5）.var key=e.which，獲取按下鍵或者按鈕的鍵位序號。

（6）.if(key==13)，當key值等於13的時候表示按下的是Enter鍵。

（7）.e.preventDefault()，組織點選回車的預設值。

（8）.var nxtIdx=$inp.index(this)+1,獲取下一個元素的索引值。

（9）.(":input:text:eq("+nxtIdx+")").focus()，使下一個表單元素獲取焦點。

二.相關閱讀:

（1）.:text選擇器參閱jQuery :text一章節。

（2）.:first選擇器參閱jQuery :first一章節。

（3）.focus()函式參閱jQuery focus 事件一章節。

（4）.keydown事件參閱jQuery keydown 事件一章節。 

（5）.e.which屬性參閱jQuery event.which一章節。

（6）.e.preventDefault()參閱jQuery event.preventDefault()一章節。 

（7）.index()參閱jQuery index()一章節。

（8）.:eq()參閱jQuery :eq()一章節。

相關文章