4

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.

user3412075
  • 129
  • 1
  • 9

3 Answers3

2

For tab navigation , I would suggest to go for tabindex

Your question seems to have 2 modes of focusing the input element.

  1. via enter key
  2. via tab key

As I already suggested, stay with tabindex

To avoid form submission on enter key and your #2 use-case, below approach will do the work

$(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

Praveen
  • 55,303
  • 33
  • 133
  • 164
2

Use tabindex property:

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

And update your script to navigate using it's value:

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

Full example:

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

Tobías
  • 6,142
  • 4
  • 36
  • 62
  • Your jsFiddle works, but I just want disable enter for form submit button, now I can't click my form submit button too :) , is it possible to allow clicking of form submit, but disable enter key – user3412075 Aug 29 '14 at 09:09
  • @user3412075 Look at http://stackoverflow.com/a/11235672/3963330 I've updated http://jsfiddle.net/kL2ntc2u/9/ – Tobías Aug 29 '14 at 09:39
1

If you want to do it like now. You can adjust some of the 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/

TeeDeJee
  • 3,756
  • 1
  • 17
  • 24
  • is it possible to enable form submit by mouse click, i just want disable enter key – user3412075 Aug 29 '14 at 09:14
  • This is possible if you change keyup by keydown or keypress. You then need to add e.preventDefault(); in your if function. See this fiddle http://jsfiddle.net/tgk4rrgL/ If you like this answer please accept it. – TeeDeJee Aug 29 '14 at 11:02