按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()。如果您不使用派对图书馆，则不需要付出更多的努力。