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

This works like this: /

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

/

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=".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>

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/ej9tvosj/1/

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

https://jsfiddle/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./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?

• javascript
• jquery
• html

• You can easily add snippets of code in SO. I've changed it for you but next time remember to insert snippets when possible. – quirimmo Commented Aug 19, 2017 at 13:21

3 Answers 3

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

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./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>

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./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>