Focus onto next input on Enter key using jQuery script

Question

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

$(".form >input") - you have a big fat p in between .form and input in the second case. So would need to be $(".form input") or $(".form > p > input")` — fdomn-m
– fdomn-m, Commented Jun 10, 2020 at 14:39
Does this answer your question? How to find next similar sibling moving down in the dom tree — fdomn-m
– fdomn-m, Commented Jun 10, 2020 at 14:45

palaѕн · Accepted Answer · 2020-06-10 14:45:49Z

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>

Didn't see those naughty <br/>s hidng at the end. .next() gets the next, then filters to the selector.

Collectives™ on Stack Overflow

Focus onto next input on Enter key using jQuery script

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related