Move Cursor to Next Form Field

Question

I have a form with various inputs, combos and etc.

How can I make so that when the user selects an option in the combo the cursor already jumps to the next form field?

Also make sure that when the user fills a field that has the right limit, ie Cpf, cellular, cnpj... at the end already jump also to the next field?

I don’t know if it helps or influences anything, but I’m using Laravel 5.1.

Answer 1

Translating a response from the self Stackoverflow:

You will need to create a role onkeyup in the javascript and count the size of the value the user is passing. In this function, you will create a if, passing the conditions if the size of the string that the user is passing is equal to or exceeds the maximum size, you will add the function to give a focus to the next field.

What the code would look like:

    <input name="productkey1" type="text" id="productkey1" size="4" maxlength="5"/>
    <input name="productkey2" type="text" id="productkey2" size="4" maxlength="5"/> 

     $('#productkey1').keyup(function() {
         if(this.value.length == $(this).attr('maxlength')) {
             $('#productkey2').focus(); 
            }
        }); 

Jsfiddle: http://jsfiddle.net/khbEL/

Answer 2

What you seek is to call focus of an element. For example:

var select = document.querySelector('select');
select.addEventListener('change', function() {
    var input = document.querySelector('input[name="' + this.value + '"]');
    if (input) input.focus();
});

jsFiddle: https://jsfiddle.net/wbnj0cc8/

In this example each time you select change it will look for an input with the name that was selected in select. If you find it you put it in focus.

For cases where you have an input limit just count the size of the string in the input and pass to the next input when this condition is checked. An example would be:

var inputs = document.querySelectorAll('input');
[].forEach.call(inputs, function(el) {
    if (el.dataset && el.dataset.length) {
        var max = parseInt(el.dataset.length, 10);
        el.addEventListener('keyup', function() {
            if (this.value.length >= max) focusNext(this, inputs)
        });
    }
});

function focusNext(el, els) {
    var match;
    for (var i = 0; i < els.length; i++) {
        if (match) {
            els[i].focus();
            break;
        }
        match = els[i] == el;
    }
}

jsFiddle: https://jsfiddle.net/ev20ohty/

Answer 3

Use the tabindex attribute in the form fields, example:

<input type="text" name="nome" tabindex="1">
<input type="text" name="cpf" tabindex="2">
<input type="text" name="RG" tabindex="3">

Works also for links:

<a href="google.com" tabindex="4">Google</a>

The Navigator will follow the TABINDEX sequence