提问者:小点点

在enter上的下一个输入jQuery脚本有时不起作用


我使用这个jQuery脚本在按下enter时将注意力集中在下一个输入上:

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

它确实适用于此HTML表单

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

但这次不行

<div class="form">
    <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>
    <input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo5.value=cislo5.value.slice(0,2)" /><br>
    <input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo6.value=cislo6.value.slice(0,2)" /><br>
    <input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo7.value=cislo7.value.slice(0,2)" /><br>
    <input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo8.value=cislo8.value.slice(0,2)" /><br>
    <input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo9.value=cislo9.value.slice(0,2)" /><br>
    <input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo10.value=cislo10.value.slice(0,2)" /><br>
    <input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo11.value=cislo11.value.slice(0,2)" /><br>
</div>

那里怎么了? 有人能请给我一个工作脚本或一个完全不同的方式来实现下一个输入在回车? 非常感谢!


共1个答案

匿名用户

这里的问题是您正在使用直接子选择器,如:

$(".form > input")

这只匹配form类中的任何直接input元素,但在下一个示例中,input不是直接子元素。 所以,你需要下降扇区,就像:

$(".form input")

这将匹配form类中的任何输入,无论它是否是直接子级。

此外,您还需要替换

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

用这个:

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

之所以需要这样做,是因为.next()将获得每个元素紧跟其后的同级元素,但这里的input不是紧跟其后的同级元素。 我们还有一些
,它们也是导致问题的原因。 这可以使用.nextAll('input:first')来解决。

演示:

null

$(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>