How to Move Focus on Next Field When Enter Is Pressed

How to move focus on next field when enter is pressed?

It fails because this is the document in your code.

You want to use the index of the currently focused item (document.activeElement), or if you use delegated events you can make sure this is the current item.

This final version works whether there are tabindexes or not. It also wraps around:

They both use a custom jQuery selector that I add called :focusable to select all focusable element (including links):

// register jQuery extension
jQuery.extend(jQuery.expr[':'], {
    focusable: function (el, index, selector) {
        return $(el).is('a, button, :input, [tabindex]');
    }
});

$(document).on('keypress', 'input,select', function (e) {
    if (e.which == 13) {
        e.preventDefault();
        // Get all focusable elements on the page
        var $canfocus = $(':focusable');
        var index = $canfocus.index(this) + 1;
        if (index >= $canfocus.length) index = 0;
        $canfocus.eq(index).focus();
    }
});

You can use the same custom selector in the event handler if you like. Then it will even work on anchor links (if you change the event to keydown instead of keypress):

$(document).on('keydown', ':focusable', function (e) {

This also uses a delegated on, listening for the keydown event on the document. It then applies the jQuery selector, it then applies the function to any matching element that caused the event. This is much more efficient as it only applies the selector at event time (rather than apply multiple event handler to each DOM matching element).

$(document).keypress(function(e) {
    if(e.which == 13) {

            // Do something here if the popup is open
            //alert("dd")
            var index = $('.ui-dform-text').index(document.activeElement) + 1;
            $('.ui-dform-text').eq(index).focus();

    }
});

*Note: alerts can interfere with focus, so use console.log for output like that and view in most browser's debug window (like Chrome's F12 debugging tools).

This one wraps back to the first item from the last and also works on selects (the default behavior is blocked, so you can only use space to open or up/down to select options.

$('input,select').on('keypress', 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();
    }
});

$(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();
    }
});

How to move to next input field when enter key is pressed?

That should work:

if (whichKey == 13) {
    console.log('successful');
    evt.preventDefault(); // if it's inside <form> tag, you don't want to submit it
    document.getElementById('nextInputID').focus();
}

Angular - Focus on next input field after pressing the Enter key

One Way to solve this problem is dynamically assign an id to your input fields in the form based on the number of input fields.

Then attach a keyup trigger for your desired function like

<form [formGroup]="myForm">
    <div formArrayName="things">
        <div *ngFor="let thing of things.controls; let i=index">
            <label [for]="'input' + i">Thing {{i}}:</label>
            <input type="text" [formControlName]="i" [name]="'input' + i" [id]="'input' + i" (keyup.enter)="focusNext(i)"  />
        </div>
    </div>
</form>

once you have added a dynamic id to each of the form fields and you have defined a relevant function for the manipulation you want to perform which might look like this

 public focusNext(i) {
        let nextElementSiblingId = 'input'+ i+1;
        if (i<this.things.controls.length) {
         document.querySelector(`#${nextElementSiblingId}`).focus()
        }     
      
  }

Hope it solves your problem !

Focus on next field on pressing enter key in Vuejs

EDIT: So, it was pretty hard to hack Vuetify and let it behave like a basic input since it was not sending it's DOM element through @change. So, we achieved it with some hacky watcher and this nextElement.$el.querySelector("[role='button']").click() selector, to emulate a click and open the v-select.

For some reason, it's not working on Codesandbox, so I don't have a link there to share, only my github repo with a working solution.

Here is the chat that we had: https://chat.stackoverflow.com/rooms/228426/focus-on-next-field-on-pressing-enter-key-in-vuejs

Here is how the final result looks like: https://www.loom.com/share/9e504e14ceb44644976c73fb4ced5c1c

How to move focus to next element on enter on dynamically created select

Kind of hard to guess what you are asking for.

There are already multiple suggestions and answers available on SO.

Enter key press behaves like a Tab in Javascript

document.addEventListener('keydown', function (e) {

  if (event.keyCode === 13 && event.target.nodeName == 'SELECT') {
    var form = event.target.closest('form');
    var index = Array.prototype.indexOf.call(form, event.target);
    form.elements[index + 1].focus();
    return false;
  }
});

<form>
<div id = "Customer">Customer</div>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
</form>