Javascript Введите в Форме Отправить на вкладке

Question

Javascript получать нажатие клавиши "Enter" Событие на Input Type Text

У меня есть 3 текстовых входов, 1 DropDownList и 10 строк.

Строка 1 будет иметь идентификатор _1 для ввода текста и 3 ниспадающих следует по _2 для строки 2.

То, что я хотел достичь, это:

Textfield1 ------> left_1 
Textfield2 ------> center_1 
Textfield3 ------> right_1 
DropdownList ----> dd_1 

Когда я нажимаю войти на left_1, Я хочу изменить событие ввода как «вкладку» на center_1, а если я зарегистрирую событие на center_1, он будет занесен в right_1.

Если я ввожу событие в right_1, он перейдет к следующей строке left_2.

Проблема, как правило, если вы нажмете «закладку» в right_1, она будет направлена ​​на dd_1

Следующий ключевой вопрос, я получил кнопку отправки в форме, если я нажимаю войти в любой из формы, он просто представит форму. Я попробовал, прежде чем отключить войти, используя проверку eventcode и предотвратить умолчанию, но делать это так, я до сих пор не удалось изменить мои войти, чтобы сосредоточиться на текстовое поле, как упоминается выше

JsFiddle on my Question

Мне нужно иметь возможность перейти к строке 2 на последнем входе для первой строки при вводе.

Answer 1

Использование TabIndex свойство:

http://www.w3.org/WAI/UA/TS/html401/cp0101/0101-TABINDEX.html

и обновить скрипт для навигации, используя его значение:

var nextIndex = $(this).prop('tabindex') + 1; 
    $('[tabindex=' + nextIndex + ']').focus(); 

Полный пример:

http://jsfiddle.net/kL2ntc2u/7/

Answer 2

Для вкладок навигации, я хотел бы предложить, чтобы пойти на tabindex

Ваш вопрос, кажется, имеет 2 режима фокусировки входного элемента.

1. с помощью клавиши ввода
2. с помощью вкладки ключа

Как я уже предложил, оставайся с tabindex

Чтобы избежать отправки формы на клавишу ввода и ваш # 2 потребительной случай, ниже подход будет делать работу

$(function() { 
    $("form :input").on("keypress", function (e) { 
     var nextIndex = $(this).prop('tabindex') + 1; // from above answer 
     $('[tabindex=' + nextIndex + ']').focus(); 
     return e.keyCode != 13; // this will ensure to prevent form submit 
    }); 
}); 

JSFiddle

Answer 3

Если вы хотите сделайте это сейчас. Вы можете настроить некоторые из javascript.

if(e.keyCode == "13"){  
    var id = $(this).attr('id'); 
    if(id.indexOf("right") > -1){ 
     var number = id.split('_')[1]; 
     number++; 
     $("#left_"+number).focus(); 
    }else{ 
     $(this).next().focus(); 
    }    
} 

http://jsfiddle.net/mko1hght/