Javascript getting keypress “Enter” Event on Input Type Text

Question

Javascript getting keypress "Enter" Event on Input Type Text

I have 3 text inputs, 1 dropdownlist and 10 rows.

Row 1 will have identifier of _1 for the 3 text input and dropdown follow by _2 for row 2.

What I wanted to achieve is:

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

When I press enter on left_1 , I want to change the enter event as sort of "tab" to center_1 , while if I do enter event at center_1 , it will tab to right_1 .

If I do enter event at right_1 , it will go to the next row left_2 .

Problem is normally if you press "tab" at right_1 , it will focus to dd_1

The next key issue is, I got a submit button in the form, if I press enter at any of the form, it will just submit the form. I tried before disable the enter using checking the eventcode and prevent Default but doing so, I still unable change my enter to focus on the text field as mention above

JsFiddle on my Question

I need to able to go to row 2 at the last input for the first row upon enter.

Answer 1

you can use keypress event for expample :

var input = document.getElementById('test');
input.addEventListener('keypress', function(e) {
console.log(e.key);
if( e.key == 'Enter' ) {
...
}
});

Answer 2

For the first part, if the textboxes are all siblings in order, eg

<input>
<input>
<input>
<input>

With nothing inbetween, then you could just do something like this:

$("input[type=text]").keyup(function(e){

    if(e.keyCode == "13")
    {
        $(this).next().focus();
    }

})

JSFiddle