How to advance to the next form input when the current input has a value?

Solution 1:

you just need to give focus to the next input field (by invoking focus()method on that input element), for example if you're using jQuery this code will simulate the tab key when enter is pressed:

var inputs = $(':input').keypress(function(e){ 
    if (e.which == 13) {
       e.preventDefault();
       var nextInput = inputs.get(inputs.index(this) + 1);
       if (nextInput) {
          nextInput.focus();
       }
    }
});

Solution 2:

Needed to emulate the tab functionality a while ago, and now I've released it as a library that uses jquery.

EmulateTab: A jQuery plugin to emulate tabbing between elements on a page.

You can see how it works in the demo.

if (myTextHasBeenFilledWithText) {
  // Tab to the next input after #my-text-input
  $("#my-text-input").emulateTab();
}

Solution 3:

function nextField(current){
    for (i = 0; i < current.form.elements.length; i++){
        if (current.form.elements[i].tabIndex - current.tabIndex == 1){
            current.form.elements[i].focus();
            if (current.form.elements[i].type == "text"){
                current.form.elements[i].select();
            }
        }
    }
}

This, when supplied with the current field, will jump focus to the field with the next tab index. Usage would be as follows

<input type="text" onEvent="nextField(this);" />

Solution 4:

I couldn't find an answer that could do what I wanted. I had a problem where there were some link elements that I didn't want users tabbing to. This is what I came up with:

(Note that in my own code I used a:not(.dropdown-item) instead of a on the allElements line, in order to prevent users tabbing to a.dropdown-item.)

function(event){
        //Note that this doesn't honour tab-indexes

        event.preventDefault();

        //Isolate the node that we're after
        const currentNode = event.target;

        //find all tab-able elements
        const allElements = document.querySelectorAll('input, button, a, area, object, select, textarea, [contenteditable]');

        //Find the current tab index.
        const currentIndex = [...allElements].findIndex(el => currentNode.isEqualNode(el))

        //focus the following element
        const targetIndex = (currentIndex + 1) % allElements.length;
        allElements[targetIndex].focus();
}

Solution 5:

This simulates a tab through a form and gives focus to the next input when the enter key is pressed.

window.onkeypress = function(e) {
    if (e.which == 13) {
        e.preventDefault();
        var inputs = document.getElementsByClassName('input');
        for (var i = 0; i < inputs.length; i++) {
        if (document.activeElement.id == inputs[i].id && i+1 < inputs.length ) {
            inputs[i+1].focus();
            break;   
        }
    }