How to move to the next input using javascript?

Question

How to move to the next input using javascript?

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (1 votes)

1

I made a form in HTML but I wanted it when a user hit ENTER to go to the next field.

Example, the first field has to fill in with the name, when the person pressed ENTER it would go to the low (user) option and so on.

<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Nome:
      <span class="required">*</span>
   </label>
   <div class="col-md-6 col-sm-6 col-xs-12">
      <input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" required="required" type="text">
   </div>
</div>
<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Usuário:
     <span class="required">*</span>
   </label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input type="email" id="email" name="email" required="required" class="form-control col-md-7 col-xs-12">
   </div>
</div>
<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Confirmar usuário:
     <span class="required">*</span>
   </label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input type="email" id="email2" name="confirm_email" data-validate-linked="email" required="required" class="form-control col-md-7 col-xs-12">
   </div>
</div>
<div class="item form-group">
   <label for="password" class="control-label col-md-3">Senha:</label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input id="password" type="password" name="password" data-validate-length="6,8" class="form-control col-md-7 col-xs-12" required="required">
   </div>
</div>
<div class="item form-group">
   <label for="password2" class="control-label col-md-3 col-sm-3 col-xs-12">Confirmar senha:</label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input id="password2" type="password" name="password2" data-validate-linked="password" class="form-control col-md-7 col-xs-12" required="required">
   </div>
</div>

How can I do this?

javascript

asked by anonymous 20.06.2018 / 14:00

3 answers

3

You can use this code, using only JavaScript without additional libraries.

In HTML, you add the tabindex attribute:

<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">

JavaScript:

var inputs = document.querySelectorAll("input,select");
for (var i = 0 ; i < inputs.length; i++) {
   inputs[i].addEventListener("keypress", function(e){
      if (e.which == 13) {
         e.preventDefault();
         var nextInput = document.querySelectorAll('[tabIndex="' + (this.tabIndex + 1) + '"]');
         if (nextInput.length === 0) {
            nextInput = document.querySelectorAll('[tabIndex="1"]');
         }
         nextInput[0].focus();
      }
   })
}

Pressing focus will go to the next tabindex

Source: link

20.06.2018 / 14:04

1

In pure JavaScript with no HTML changes, you can do this:

var els = document.querySelectorAll("input.form-control");
for (var x=0; x<els.length; x++) {
   els[x].addEventListener("keypress", function(e){
      var k = e.which || e.keyCode;
      if(k == 13){
         e.preventDefault();
         var p = this.parentNode.parentNode.nextElementSibling.querySelector("input.form-control");
         if(p) p.focus();
      }
   });
}

<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Nome:
      <span class="required">*</span>
   </label>
   <div class="col-md-6 col-sm-6 col-xs-12">
      <input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" required="required" type="text">
   </div>
</div>
<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Usuário:
     <span class="required">*</span>
   </label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input type="email" id="email" name="email" required="required" class="form-control col-md-7 col-xs-12">
   </div>
</div>
<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Confirmar usuário:
     <span class="required">*</span>
   </label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input type="email" id="email2" name="confirm_email" data-validate-linked="email" required="required" class="form-control col-md-7 col-xs-12">
   </div>
</div>
<div class="item form-group">
   <label for="password" class="control-label col-md-3">Senha:</label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input id="password" type="password" name="password" data-validate-length="6,8" class="form-control col-md-7 col-xs-12" required="required">
   </div>
</div>
<div class="item form-group">
   <label for="password2" class="control-label col-md-3 col-sm-3 col-xs-12">Confirmar senha:</label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input id="password2" type="password" name="password2" data-validate-linked="password" class="form-control col-md-7 col-xs-12" required="required">
   </div>
</div>

20.06.2018 / 20:25

How to make an input does not accept the term "Brazilian Music" Why do I need WAMP (example) for MySQL to work? [closed]

score 3 · Accepted Answer

I think that would be my dear. Hugs!

$(document).ready(function () {
    
    $('#name').focus();
    
    $(document).find('input').keypress(function (e) {
        if (e.which == 13) {//Enter key pressed
            e.preventDefault();
            
            $(this).closest('.item')
            .next().first()
            .find('input')
            .focus();

        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Nome:
                        <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name"
                          required="required" type="text">
                      </div>
                    </div>
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Usuário:
                        <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="email" id="email" name="email" required="required" class="form-control col-md-7 col-xs-12">
                      </div>
                    </div>
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Confirmar usuário:
                        <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="email" id="email2" name="confirm_email" data-validate-linked="email" required="required" class="form-control col-md-7 col-xs-12">
                      </div>
                    </div>
                    
                    <div class="item form-group">
                      <label for="password" class="control-label col-md-3">Senha:</label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="password" type="password" name="password" data-validate-length="6,8" class="form-control col-md-7 col-xs-12" required="required">
                      </div>
                    </div>
                    <div class="item form-group">
                      <label for="password2" class="control-label col-md-3 col-sm-3 col-xs-12">Confirmar senha:</label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="password2" type="password" name="password2" data-validate-linked="password" class="form-control col-md-7 col-xs-12"
                          required="required">
                      </div>
                    </div>