CODEWITHSUNDEEP
htmljqueryforms
xzy54
xzy54

Reputation: 90

Focus onto next input on Enter key using jQuery script

I'm using this jQuery script to focus onto next input when enter pressed:

  $(function() {
    $(".form >input").on('keyup', function(e) {
      if (e.which === 13) {
        $(this).next('input').focus();
      }
    });
  });

It does work with this basic skinny HTML form

<div class="form">
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>

But not with this one

<div class="form">
    <input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus /><br>
    <input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" /><br>
    <input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" /><br>
    <input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" /><br>
    <input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5"  /><br>
    <input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" /><br>
    <input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" /><br>
    <input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" /><br>
    <input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" /><br>
    <input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" /><br>
    <input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" /><br>
</div>

What seems to be the problem here? Help me please, I'm stuck

Upvotes: 1

Views: 225

Answers (1)

palaѕн
palaѕн

Reputation: 73976

The issue here is you are using direct child selector like:

$(".form > input")

This only matches any direct input element inside form class, but in your next example input is not the direct child. So, you need to descent sector instead like:

$(".form input")

This will match any input inside the form class where it is a direct child or not.

Also, you need to replace

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

with this:

$(this).nextAll('input:first').focus();

This is needed because .next() will get the immediately following sibling of each element, but here input is not the immediate sibling. We also have some <br> in between which are causing the issue. This can be resolved using .nextAll('input:first') instead.

Demo:

$(function() {
  $(".form input").on('keyup', function(e) {
    if (e.which === 13) {
      $(this).nextAll('input:first').focus();
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">

  <p class="cislo">
    <input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo1.value=cislo1.value.slice(0,2)" /><br>
    <input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo2.value=cislo2.value.slice(0,2)" /><br>
    <input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo3.value=cislo3.value.slice(0,2)" /><br>
    <input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo4.value=cislo4.value.slice(0,2)" /><br>
  </p>

</div>

Upvotes: 1

Related Questions