Можно ли перейти от одного элемента управления к другому в форме HTML, нажав клавишу ввода?

Question

Respect All,

У меня есть HTML-форма, которая содержит различные элементы управления, такие как текстовые поля и флажки.Я хочу переместить фокус с одного элемента управления на другой, когда пользователь нажимает клавишу ENTER , не используя свойство tabindex.

Возможно ли это?

Answer 1

Вы можете сделать это, перехватив keypress и ища клавишу Enter, затем перемещаясь по DOM, чтобы найти следующее поле. Смутно, как это (живая копия) :

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 , Прототип , YUI , Closure или любой из нескольких других , чтобы сгладить различия между браузерами и упростить обход DOM. Например, в приведенном выше примере мне приходилось учитывать не менее трех различий между различными браузерами, и мне пришлось использовать цикл, чтобы найти следующий (или первый) элемент для фокусировки, пропуск через неэлементные узлы. Библиотеки помогут вам избежать написания этого повторяющегося кода и сосредоточиться на том, что вы действительно хотите делать.

Answer 2

вместо этого вы можете подключиться к событию отправки формы и просто focus() к следующему вводу, если они не были на кнопке отправки. меньше усилий, если вы не используете 3 ^rd партийную библиотеку.