Изменить Введите из представления в Tab?

Пользователям не нравится тот факт, что клавиша Enter отправляет страницу. Поэтому мне поручено предотвратить отправку и изменение клавиши Enter на вкладку в следующее поле.

Я пробовал множество фрагментов javascript, найденных в сети, но пока никто не работал. Единственный, который даже приблизился к эффекту e.preventDefault() API jQuery, который останавливает отправку, но ничего, что я пытался, не эмулирует поведение вкладки.

e.returnValue = false;
e.cancel = true;

Страница все еще отправляется с указанным выше в обработчике событий keydown. Тот же эффект с return false в обработчике событий keydown. Обработчик запускается, тестируется, помещая в него точку останова с помощью firebug.

Это должно работать как с IE, так и с Firefox.

Не говори "не делай этого".
1) Я уже убежден, что я не должен этого делать, но это не мой выбор, поэтому обсуждение немой. 2) Это был бы ответ на вопрос "Должен ли я это сделать?", О котором я не спрашиваю.

Ответы

Ответ 1

Это просто неприятно, но вы можете использовать event.preventDefault, как вы упомянули, а затем вызвать focus() на следующем ближайшем входе:

Вот простой пример:

$("input").bind("keydown", function(event) {
    if (event.which === 13) {
        event.stopPropagation();
        event.preventDefault();
        $(this).next("input").focus();
    }
});

Пример: http://jsfiddle.net/andrewwhitaker/Txg65/

Обновление: Если у вас есть элементы между входами, использование plain next() не будет работать. Вместо этого используйте nextAll():

$("input").bind("keydown", function(event) {
    if (event.which === 13) {
        event.stopPropagation();
        event.preventDefault();
        $(this).nextAll("input").eq(0).focus();
    }
});

http://jsfiddle.net/andrewwhitaker/GRtQY/

Ответ 2

$("input").bind("keydown", function(event) {

    if (event.which === 13 && this.type !== 'submit') {
        event.preventDefault();
        $(this).next("input").focus();
    }
});

Ответ 3

Основываясь на этом сообщении: http://forum.jquery.com/topic/how-to-find-next-node-in-focus-order

Я придумал это. В конце концов я решил не использовать фокальные таблицы, а вместо этого использовал ввод, чтобы получить эффект, который я хотел. .not заключается в том, чтобы не создавать кнопки изображения и кнопки отправки, чтобы они по-прежнему выполняли действие по умолчанию для отправки при входе в фокус.

$(document).ready(function() {
var focusables = $(":input").not('[type="image"]').not('[type="submit"]');

  focusables.keydown(function(e) {
    if (e.keyCode == 13) {
      e.preventDefault();
      var current = focusables.index(this),
              next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
      next.focus();
    }
  });
});