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。例如，在上面，我不得不考虑不同浏览器之间的三个差异，我不得不使用一个循环来找到要关注的下一个（或第一个）元素，跳过非Element节点。库将帮助您避免编写重复的代码并专注于您实际想要做的事情。

Answer 2

如果他们不在提交按钮上，你可以改为挂钩表单的提交事件，只是focus()下一个输入。如果你没有使用3 ^rd派对库，那么就会付出更少的努力。

按Enter键是否可以在HTML表单中从一个控件移动到另一个控件？

2 个答案: