问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

填写 4 个字符时自动切换到下一个输入字段

社区维基
1
新手上路，请多包涵

我想做的是，在填写四个字符时指向下一个选项卡。每个字段应有 4 个字符，完成后应移至下一个输入框。

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

小提琴。

原文由 Prasanga 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtmlcss
阅读 505
2 个回答
得票最新
社区维基
1
✓ 已被采纳

您的代码工作正常，但是您的输入元素设置为 type="number" 。非数字内容将被忽略，因此如果您输入“abcd”，例如，输入的 value 为空（意味着 length 的 0 ）。另一方面，如果您输入“1234”，则输入的值为 1234 。

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

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

JSFiddle 演示。

请注意，我还从该示例中的每个元素中删除了重复的 class 属性。

正如 krish 在对您的问题的评论中提到的，您的代码存在一个问题，即最后一个 input 元素将继续接受超过 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 演示。

原文由 James Donnelly 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

也许您忽略了将您的代码封装在 DOM 中就绪。 Jsfiddle 将您的代码包含在 $(window).load(function() { .....}) 中，这就是它工作的原因。所以在你自己的页面上使用：

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

在 jsfiddle 中，您可以通过选择 No wrap - in <head> 确认，然后单击运行。该代码将不起作用。但是，如果您使用包含在 DOM ready 中的上述内容，它就可以工作。

原文由 PeterKA 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题