點擊enter回車鍵實現表單元素切換焦點效果:現在網站都比較追求人性化，比如填寫表單的時候，能夠實現點擊回車就可以切換表單元素的焦點，這樣比使用滑鼠進行切換更能讓人接受，下麵就通過代碼實例介紹一下如何實現此功能。代碼如下: <!DOCTYPE html> <html> <head> <meta ch
點擊enter回車鍵實現表單元素切換焦點效果:
現在網站都比較追求人性化，比如填寫表單的時候，能夠實現點擊回車就可以切換表單元素的焦點，這樣比使用滑鼠進行切換更能讓人接受，下麵就通過代碼實例介紹一下如何實現此功能。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(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>
以上代碼實現了我們的要求，點擊回車鍵就可以實現切換文本框的焦點效果，下麵介紹一下它的實現過程。
一.代碼註釋:
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的時候表示按下的是回車鍵。
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.bind()函數可以參閱jQuery的bind()方法一章節。
5.keydown事件可以參閱jQuery的keydown事件一章節。
6.e.which屬性可以參閱jQuery的event.which屬性一章節。
7.e.preventDefault()函數可以參閱jQuery的event.preventDefault()方法一章節。
8.index()函數可以參閱jQuery的index()方法一章節。
9.:eq()可以參閱jQuery的:eq()選擇器一章節。
