CODEWITHSUNDEEP
javascriptjquerycss
Baoky chen
Baoky chen

Reputation: 99

Javascript getting keypress "Enter" Event on Input Type Text

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

My Picture to describe question

JsFiddle on my Question

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

Upvotes: 0

Views: 1009

Answers (2)

Ali Movahedi
Ali Movahedi

Reputation: 53

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' ) {
...
}
});

Upvotes: 1

Liftoff
Liftoff

Reputation: 25412

For the first part, if the textboxes are all siblings in order, e.g.

<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

Upvotes: 1

Related Questions