CODEWITHSUNDEEP
javascriptjqueryhtml
David Hope
David Hope

Reputation: 1536

jQuery jump to next input field

I'm trying to allow users to enter 1 character in the input and then JUMP into the input field.

This works like this: https://jsfiddle.net/ej9tvosj/1/

But when I put the inputs inside divs, the function stops working.

https://jsfiddle.net/ej9tvosj/2/

My code that doesn't work is identical to the one that works but the HTML part is different.

$(document).on('input', '.inps', function(event) {

  $(this).attr('type', 'tell');

  function showpanel() {
    $('.inps').attr('type', 'password');
    $(this).attr('type', 'tell');
  }

  // use setTimeout() to execute
  setTimeout(showpanel, 1000);

  // check for hyphen
  var myLength = $(this).val().trim().length;
  if (myLength == 1) {
    $(this).next('.inps').focus();
    $(this).next('.inps').val('');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="inps">enter number</label>
  <br>
  <div class="split4">
    <input type="tell" class="form-control inps" maxlength="1">
  </div>
  <div class="split4">
    <input type="tell" class="form-control inps" maxlength="1">
  </div>
  <div class="split4">
    <input type="tell" class="form-control inps" maxlength="1">
  </div>
  <div class="split4">
    <input type="tell" class="form-control inps" maxlength="1">
  </div>

</div>

Could someone please advise on this issue?

Upvotes: 1

Views: 4955

Answers (3)

kukkuz
kukkuz

Reputation: 42352

You can change where you navigate to the next input you can use closest and find to select the next input - see demo below:

$(document).on('input', '.inps', function (event) {

$(this).attr('type', 'tell');

 function showpanel() {
$('.inps').attr('type', 'password');
$(this).attr('type', 'tell');
 }

 // use setTimeout() to execute
 setTimeout(showpanel, 1000);
 
   // check for hyphen
	var myLength = $(this).val().trim().length;
  if(myLength ==1){
    $(this).closest('.split4').next('.split4').find('.inps').focus().val('');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="inps">enter number</label>
  <br>
    <div class="split4">
  <input type="tell" class="form-control inps" maxlength="1">
  </div>
  <div class="split4">
  <input type="tell" class="form-control inps" maxlength="1">
  </div>
  <div class="split4">
  <input type="tell" class="form-control inps" maxlength="1">
  </div><div class="split4">
  <input type="tell" class="form-control inps" maxlength="1">
  </div>
  
</div>

Upvotes: 1

quirimmo
quirimmo

Reputation: 9988

The reason is in the usage of the jQuery next function. Here the official doc:

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

After that you wrapped all of them with a div, they are not anymore siblings that's why this piece of code doesn't work anymore:

$(this).next('.inps').focus();

Simply change it with:

$(this).parent().next('.split4').find('input').focus();

$(document).on('input', '.inps', function(event) {

  $(this).attr('type', 'tell');

  function showpanel() {
    $('.inps').attr('type', 'password');
    $(this).attr('type', 'tell');
  }

  // use setTimeout() to execute
  setTimeout(showpanel, 1000);

  // check for hyphen
  var myLength = $(this).val().trim().length;
  if (myLength == 1) {
    $(this).parent().next('.split4').find('input').focus();
    $(this).parent().next('.split4').find('input').val('');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="inps">enter number</label>
  <br>
  <div class="split4">
    <input type="tell" class="form-control inps" maxlength="1">
  </div>
  <div class="split4">
    <input type="tell" class="form-control inps" maxlength="1">
  </div>
  <div class="split4">
    <input type="tell" class="form-control inps" maxlength="1">
  </div>
  <div class="split4">
    <input type="tell" class="form-control inps" maxlength="1">
  </div>

</div>

Upvotes: 2

brk
brk

Reputation: 50291

You need to select the parent of the current input & then find it's sibling div & then find it's child input

 $(this).parent().next('div.split4').find('input').focus();

DEMO

Upvotes: 2

Related Questions