0

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

感谢这个网站上的很多答案，我能够让 jQuery .next() 以我想要的方式旅行我的 DOM，所以感谢所有的贡献者！

因为这是给孩子的，所以有些字母是预先填好的。为了使用户更容易输入文本，我在输入之前选择了表单字段。此外，在按键之后，下一个字段被聚焦并被选中。我正在使用“keypress”而不是“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示例

我做错了吗，或者jQuery中是否存在跨浏览器问题？

也许我应该完全放弃表单元素并采用基于 div 的解决方案......

4

0 回答 0