I have a form with several inputs, combos and etc.
How can I do that when the user selects an option in the combo the cursor already jumps to the next field of the form?
Also make sure that when the user completes a field that has a certain limit, ie cpf, cell, cnpj ... at the end already skip to the next field as well?
I do not know if it helps or influences something, but I'm using the laravel 5.1.
What you're looking for is calling the 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();
});
In this example each time the select changes it will look for an input with the name that was selected in the select. If you find it puts it in focus .
For cases where you have a limit in the input just count the size of the string in the input and move to the next input when this condition is verified. 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;
}
}
Translating an answer from itself StackOverflow :
You will need to create a onkeyup function in javascript and count the size of the value that 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 focus to the next field. >
How would the code 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 : link
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">
It also works for links:
<a href="google.com.br" tabindex="4">Google</a>
The Browser will follow the TABINDEX sequence