使用html形式填字游戏的跨浏览器问题

Question

我正在为孩子们构建一个基于网络的小型填字游戏。我的想法是为每个字母添加一个字符宽的输入文本字段。输入一个字符后，浏览器应自动跳转下一个文本字段。

感谢这个网站上的很多答案，我能够以我想要的方式获取jQuery .next（）来感谢我，感谢所有贡献者！

因为这是给孩子们的，所以有些字母是预先填写的。为了使用户更容易输入文本，我在输入之前选择了表单字段。此外，在按下按键后，下一个字段被聚焦并被选中。我正在使用“按键”代替“keyup”，因为我读到它会使iPad更友好。

到目前为止我的代码是

$( document ).ready(function() {
    $( "input:text" ).attr( "maxlength", 1 );
    $( "input:text" ).keypress( function( event ) {
        $nextField = $( this ).parent().next().children('input:text');
        $nextField.focus();
        $nextField.select();
    });
    $( "input:text" ).click(function( event ) {
        $( this ).select();
    });
});

这似乎在Firefox中运行良好，但在Chrome中，预先填写的字母在输入字母后显示为空表单字段。在IE中，在输入字符之前选择下一个字段，因此填充下一个字段，而不是单击的字段。

这是我的jsfiddle example

我这样做是错误的，还是jQuery中存在跨浏览器问题？

也许我应该完全抛弃表单元素并寻找基于div的解决方案......