在输入框处于焦点后立即自动生成iPad点击事件

Question

哟，waddup？

我有一系列输入框，允许我输入一串字母或字符，以“溢出”的方式将一个字母存储到每个方框中。每个框都是输入文本类型，其限制为1个字符。

它在我的网络浏览器上工作正常（在Windows中）。然而，在iPad上，点击第一个输入框内的第一个字母后，第二个输入框将突出显示（焦点），但iPad的虚拟键盘将下拉（消失）。然后我被迫点击第二个输入框来调出iPad的虚拟键盘。

演示。 http://jsfiddle.net/frankiekam/GUaZB/9/

HTML

<form>
   <input class="test" type="text" maxlength="1" />
   <input class="test" type="text" maxlength="1" />
   <input class="test" type="text" maxlength="1" />
    <input class="test" type="text" maxlength="1" />
    <input class="test" type="text" maxlength="1" />
    <input class="test" type="text" maxlength="1" />       
</form>

JQuery的：

$("input").keyup(function() {
    var input_flds = $(this).nextAll(".test:first");
    input_flds.select().focus(); 
});

CSS

input[type=text] {
    width: 30px;
}

使用（在iPad上）输入字母“a”，“s”和“t”令人沮丧，如下图所示，我必须做6个六步：

1. 点按以显示iPad虚拟键盘
2. 键入'a'，焦点移至第二个输入框
3. 点按以显示iPad虚拟键盘
4. 键入's'，焦点移至第三个输入框
5. 点按以显示iPad虚拟键盘
6. 键入't' 非常tedius !!!



我的任务就是这个。我需要找到一种方法让Javascript / JQuery代码在下一个输入框聚焦后立即自动注册或创建iPad点击事件。 正确的流程应该是这样的：

1. 点按以显示iPad虚拟键盘（VK）
2. 键入'a'，焦点移至第二个输入框，点击事件自动生成，VK弹出。
3. 键入's'，焦点移至第三个输入框，点击事件自动生成，VK弹出。
4. 键入't'。

我需要什么神奇的CSS / HTML / Javascript来完成这个Quest，Sire？

参考/相关： Type a word from the keyboard and store each letter into a series of multiple input text boxes 和 http://moodurian.blogspot.com/2013/09/how-i-managed-to-allow-input-of-only-1.html

Answer 1

您可能想尝试一下：

$('input').on('keyup', function () {
    $(this).next().focus();
});

或

$('input').on('keyup', function () {
    $(this).next().click();
});

这样做是在按下按键后找到下一个输入，并确保通过单击该字段或直接聚焦来聚焦下一个输入字段。