How to move focus on next field when enter is pressed? I tried many approaches but nothing is working

Question

 <!DOCTYPE html>

 <html>

 <head>

 <title></title>

 </head>

Javascript code to switch between forms by pressing enter.

 <script type="text/javascript">

 $(document).on('keypress', 'input,select', function (e) {

 if (e.which == 13) {

 e.preventDefault();

 var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');

    console.log($next.length);

    if (!$next.length) {

        $next = $('[tabIndex=1]');
    }

    $next.focus();
}
});

</script>

<body>

creating forms

    <input type="number" name="" tabindex="1">

    <input type="number" name="" tabindex="2">

    <input type="number" name="" tabindex="3">

    <input type="number" name="" tabindex="4">

</form>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-

q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

</html>

Ive tried many approaches and the code which is working online isnt working in my computer.

Why do you need JavaScript for this? Doesn't it happen automatically? — Barmar, Nov 21 '19 at 18:29
Does this answer your question? [How to move focus on next field when enter is pressed?](https://stackoverflow.com/questions/24209588/how-to-move-focus-on-next-field-when-enter-is-pressed) — Giorgio.dev, Nov 21 '19 at 18:38

Mahmoud Abdelsattar · Answer 1 · 2019-12-02T07:21:24.077

Your code works, but you have some minor mistakes that needs to be fixed.

Your javascript code needs to be placed in the footer (before the /body) after the jQuery script.
The js code needs to be placed either in the body or the head tags.
You need to set form tag.

This is your code but the working version:

<!DOCTYPE html>

<html>
<head>
    <title></title>
</head>

<body>
    <form>
        <input type="number" name="" tabindex="1">
        <input type="number" name="" tabindex="2">
        <input type="number" name="" tabindex="3">
        <input type="number" name="" tabindex="4">
    </form>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(document).on('keypress', 'input,select', function (e) {
            if (e.which == 13) {
                e.preventDefault();
                var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
                console.log($next.length);
                if (!$next.length) {
                    $next = $('[tabIndex=1]');
                }
                $next.focus();
            }
        });
    </script>
</body>
</html>

How to move focus on next field when enter is pressed? I tried many approaches but nothing is working

1 Answers1