填写4个字符时自动标签到下一个输入字段 [英] Auto tab to next input field when fill 4 characters

问题描述

我想要做的是，填写四个字符时指向下一个选项卡。每个字段应该有4个字符，一旦完成，它应该移动到下一个输入框。

  $（。inputs） .keyup（function（）{
 if（this.value.length == this.maxLength）{
 $（this）.next（'。inputs'）。focus（）; 
 } 
}）; 
  

Fiddle 。

解决方案

您的代码正常工作，但您的输入元素设置为类型= 数字。非数字内容被忽略，所以如果输入abcd，例如输入的值为空（意味着长度 of 0 ）。另一方面，如果您输入1234，则输入值为 1234 。

如果您想要代码在非数字内容输入时触发，只需将每个输入的类型更改为 text 。

 < input class =inputstype =textmaxlength =4/> 
  

JSFiddle演示 。

请注意，我也删除了重复的



---





由于输入元素将继续接受超过4个字符。为了解决这个问题，请检查以确保 next（'。inputs'）元素：

  if（this.value.length == this.maxLength）{
 var $ next = $（this）.next（'。inputs'）; 
 if（$ next.length）
 $（this）.next（'。inputs'）。focus（）; 
 else 
 $（this）.blur（）; 
} 
  

JSFiddle演示 。

What I am trying to do is, point to next tab when filling four characters. Each field should have 4 characters and once it is completed it should move to next input box.

 $(".inputs").keyup(function () {
        if (this.value.length == this.maxLength) {
          $(this).next('.inputs').focus();
        }
  });

Fiddle.

解决方案

Your code works fine, however your input elements are set as type="number". Non-numeric content is ignored, so if you enter "abcd", for example, the input's value is empty (meaning a length of 0). If you enter "1234" on the other hand, the input's value is 1234.

If you want your code to fire when non-numeric content is entered, simply change each input's type to text.

<input class="inputs" type="text" maxlength="4" />

JSFiddle demo.

Note that I've also removed the duplicate class attribute from each of your elements in that example, too.

---

As krish has mentioned in the comments on your question, there is an issue with your code in that the last input element will continue to accept more than 4 characters. To fix this, put a check in place to ensure that there is a next('.inputs') element:

if (this.value.length == this.maxLength) {
  var $next = $(this).next('.inputs');
  if ($next.length)
      $(this).next('.inputs').focus();
  else
      $(this).blur();
}

JSFiddle demo.

这篇关于填写4个字符时自动标签到下一个输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！