CODEWITHSUNDEEP
javascriptjquerykeyboard-events
JRulle
JRulle

Reputation: 7568

Use Enter Keydown Event to move to the next Input

I have a large form. As users are filling in values I would like for the enter key to take on the same behavior as the tab key (i.e. I want to move the user to the next input element when the enter key is pressed.

Due to the way my HTML form is structured into various sections I cannot assume the next input is a sibling of the current input. Additionally, the classes and IDs of the inputs are not sequential.

jQuery:

$("input").bind("keydown", function (event) {
    document.getElementById('keys').innerHTML = document.getElementById('keys').innerHTML + event.which + " ";
    if (event.which === 13) {
        event.stopPropagation();
        event.preventDefault();
        var e = $.Event("keydown");
        e.which = 9;
        $(this).trigger(e);
    }
});


JSFIDDLE

Upvotes: 1

Views: 2171

Answers (1)

Malith
Malith

Reputation: 980

This will do your job

 $("input").not($(":button")).keypress(function (evt) {
            if (evt.keyCode == 13) {
                iname = $(this).val();
                if (iname !== 'Submit') {
                    var fields = $(this).parents('form:eq(0),body').find('button, input, textarea, select');
                    var index = fields.index(this);
                    if (index > -1 && (index + 1) < fields.length) {
                        fields.eq(index + 1).focus();
                    }
                    return false;
                }
            }
        });

example

Upvotes: 3

Related Questions