Switch to next input automatically

Asked

Viewed 778 times

-3

Fala galera!

I have two inputs in the form and would like to know how I do so when the input1 were filled it automatically changed to the input2.

These are the inputs, in case it has a limit of 5 digits:

<input type="text" id="input1" maxlength="5" required>
<input type="text" id="input2"  maxlength="5" required>
javascript html jquery
  • 1

    Some information is missing in order to define an answer to your question. For example, what defines that your inputs are already filled? For example, are all selects? Do they have any character sizes that define that they are filled in? Without a rule to understand when the input is 'filled' there is no way to solve the problem.

  • Welcome Romulo, put your code until the moment detail the question better.

  • Also make it easy to post how your form is at the moment and what you’ve tried to do to solve the problem.

  • I put an example of what the inputs would look like

2 answers

1


Create a common class for inputs, capture the active input input, set a condition to go to the next input, after validating the condition, take the next input and call the Focus event.

$(".inputs").keyup(function() {
    if (this.value.length == this.maxLength) {
        $(this).next('.inputs').focus();
    }
});

Reference

0

You can create a function to focus on the next input by pressing enter by simply passing the id per parameter in an onkeyup function.

Example:

<script type="text/javascript">

function PressEnter(nextinputId){
    if(event.keyCode == 13){
        document.getElementById(nextinputId).focus();     
        return false;           
    }
}

</script>

<input type="text" id="input1" maxlength="5" onkeyup="PressEnter('input2');" required>
<input type="text" id="input2"  maxlength="5" required>

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.