按enter鍵是否可以在HTML表單中從一個控件移動到另一個控件？

Question

尊敬的所有，

我有一個HTML表單，其中包含不同的控件，如文本框和複選框。當用戶按下ENTER鍵時，我想將焦點從一個控件移動到下一個控件，而不使用tabindex屬性。

可能嗎？

Answer 1

您可以通過掛接keypress並查找Enter鍵，然後導航DOM以查找下一個字段來完成此操作。依稀這樣(live copy)：

window.onload = function() { 

    var form, 
     index; 

    // Get the form 
    form = document.getElementById('theForm') 

    // Hook the keypress event on all its inputs 
    for (index = 0; index < form.elements.length; ++index) { 
    hookEvent(form.elements[index], 'keypress', elementKeypressHandler); 
    } 

    // Our handler for keypresses 
    function elementKeypressHandler(event) { 
    var keyCode, 
     next, 
     tryFirst; 

    // Handle IE/standards variance 
    event = event || window.event; 

    // Get the keycode 
    keyCode = event.keyCode || event.which; 

    // If Enter... 
    if (keyCode == 13) { 
     // Find the next field; if we run out of fields, try 
     // from the beginning 
     tryFirst = true; 
     next = this.nextSibling; 
     while (next && (next.nodeType != 1 || next.tagName != "INPUT")) { 
     next = next.nextSibling; 
     if (!next && tryFirst) { 
      tryFirst = false; 
      next = this.parentNode.firstChild; 
     } 
     } 

     // If we have one, focus it 
     if (next && next !== this) { 
     next.focus(); 
     } 
    } 
    } 

    // Handle IE vs. standards for DOM2 event hookup 
    function hookEvent(element, event, handler) { 
    if (element.addEventListener) { 
     element.addEventListener(event, handler, false); 
    } 
    else if (element.attachEvent) { 
     element.attachEvent("on" + event, handler); 
    } 
    else { 
     element["on" + event] = handler; 
    } 
    return element; 
    } 
};​ 

---

題外話：這東西是很多容易，如果你使用像jQuery，Prototype，YUI，Closure，或any of several others庫，以消除瀏覽器差異爲你，並使其更容易遍歷DOM。例如，在上面的例子中，我不得不考慮各種瀏覽器之間不同的三個之間的差異，並且我不得不使用循環來查找下一個（或第一個）元素來關注，元素節點。圖書館將幫助您避免編寫重複的代碼並專注於您實際想要做的事情。

Answer 2

如果不在提交按鈕上，您可以改爲掛接到表單的提交事件，然後輸入focus()。如果您不使用派對圖書館，則不需要付出更多的努力。