[Tips]網頁上按 Enter 鍵，模擬 Tab 鍵效果
前言
一般Web的頁面，在input中按了Enter鍵，通常都會觸發form上的預設按鈕，而預設按鈕通常又是第一個按鈕。倘若沒有特別設計的話，萬一第一個按鈕是清空畫面、回上頁、關閉視窗、登出等等，可能就會很囧，因為就是有許多使用者會不自覺的按enter鍵，或是打字的時候，多敲了那麼一下enter鍵。
另外一種很常見的情況，是將client/server的winform系統，migration至Web系統。使用者的舊習慣，是使用enter鍵來當作跳至下一個input的快速鍵，而網頁上通常是tab。當然，正常來說應該是要教育使用者，在web上移至下一個項目應該是點選tab鍵，不過當使用者位高權重，乙方的窗口建議方式又不得效果時，就很容易被逼著得做出這樣的效果。
我想，因為這樣的情況很常見，至少也要把enter鍵的功能擋掉，才算合理。所以上網找了一下『Enter』、『Tab』、『jQuery』果然就出現了一些好用的文章，這邊針對一些特殊的需求跟考量，客製化了一小部分的功能，給大家做參考。
需求
- 在任何:text與select上，按下Enter鍵，游標都要能跳至下一個disabled為false的input；
- 在按鈕以及textarea上，則按下Enter鍵應該要跟原本行為一樣；
- 至少要能符合firefox與IE；
- 畫面上最後一個:text或select，按下Enter鍵則不動作；
-
特殊需求：當在radio上，應該要focus到此radiobuttonlist群組的下一個符合條件的DOM。
作法
設計：
- 將畫面上 :input且:enabled的DOM，都加上一個特定的class，來當作selector的條件；
-
針對第一點selector撈出來的DOM集合，判斷browser的種類：
a. 當為firefox時，在keypress事件上加上要處理的function；
b. 當為IE時，則在keydown事件上加上要處理的function； -
當client端在selector上，按下的鍵為Enter鍵時，判斷是否為按鈕或textarea：
a. 如果是，則不進行額外處理；
b. 如果不是，則判斷是否為最後一個DOM：
(1)若為最後一個，則不動作；
(2)若不是最後一個，則檢查下一個DOM是否disabled為false：
下一個DOM的定義，根據目前的DOM是否為radio來決定；
若是，則focus到下一個DOM；
若不是，則再往下檢查，直到最後一個DOM或是可以focus的DOM。
實作的簡易程式 by jQuery：
$(document).ready(function () {
$(':input:enabled').addClass('enterIndex');
// get only input tags with class data-entry
textboxes = $('.enterIndex');
// now we check to see which browser is being used
if ($.browser.mozilla) {
$(textboxes).bind('keypress', CheckForEnter);
} else {
$(textboxes).bind('keydown', CheckForEnter);
}
});
function CheckForEnter(event) {
if (event.keyCode == 13 && $(this).attr('type') != 'button' && $(this).attr('type') != 'submit' && $(this).attr('type') != 'textarea' && $(this).attr('type') != 'reset') {
var i = $('.enterIndex').index($(this)); //現在是在第幾個
var n = $('.enterIndex').length; //總共有幾個
if (i < n - 1) {
if ($(this).attr('type') != 'radio') //如果不是radio
{
NextDOM($('.enterIndex'),i);
}
else { //如果是radio，不能focus到下一個，因為下一個可能是同樣name的radio
var last_radio = $('.enterIndex').index($('.enterIndex[type=radio][name=' + $(this).attr('name') + ']:last'));
NextDOM($('.enterIndex'),last_radio);
}
}
return false;
}
}
function NextDOM(myjQueryObjects,counter) {
if (myjQueryObjects.eq(counter+1)[0].disabled) {
NextDOM(myjQueryObjects, counter + 1);
}
else {
myjQueryObjects.eq(counter + 1).trigger('focus');
}
}error handling的部分尚未處理完全，有興趣的人請在使用時自行補足。
相關參考來源
blog 與課程更新內容，請前往新站位置：http://tdd.best/
