How to go to next textbox when enter is pressed?

Question

Hi guys I\'m learning Javascript and I would like to ask you guys how can I go to the next textbox after inputing text when I press the enter button in the keyboard. thank y

Answer 1

I've developed a plugin to include enter event.

(function ($) {
    $.fn.enter = function (func) {
        this.bind('keypress', function (e) {
            if (e.keyCode == 13) func.apply(this, [e]);
        });
        return this;
    };
})(jQuery);

You can call it like this:

$('#input1').enter(function(){ $(this).next().focus(); });

Answer 2

You can go to the next field in many ways, as demonstrated by all the answers here, but don't forget to assign the order of what is actually NEXT as well. You can go from field to field with the TAB button, and the layout of your site may not always go in the order you'd expect or want. The solution to this is to add tabindex="" to your fields as such:

<input type="text" tabindex="1" />
<input type="password" tabindex="2" />
<input type="submit" value="Log In" tabindex="3" />

Answer 3

You can use .keyup() to keep track of when user finish key in a character and e.keyCode to get which key was pressed, if it's 13(means enter) then use .focus() to focus the next textbox element:

$('input[type="textbox"]').keyup(function(e) {
    if(e.keyCode == 13) {
        $(this).next().focus();
    }
});

Fiddle Demo

Answer 4

Try this code :

 $('#inputform').on('keydown', 'input', function (event) {
  if (event.which == 13) {
    event.preventDefault();
    var $this = $(event.target);
    var index = parseFloat($this.attr('data-index'));
    $('[data-index="' + (index + 1).toString() + '"]').focus();
 }

});

Help Link