Question

我有一个9x9 html表，里面有输入元素，编码数独板。

我使用jQuery的.keypress方法验证用户输入，然后将焦点切换到下一个框：

// Only allow numbers from 1-9 (49-57), the 0-key (48) to tab, and the 'Enter' key to submit (13)

$('.box').keypress(function(event) {

// Check for 'Enter' key
if (event.which === 13) {
    return event.which;

// Check for digits 1-9
} else if (event.which >= 49 && event.which <= 57) {
    if ($(this).parent().is('td:last-child')) {
        $(this).closest('tr').next().children().first().find('.box').focus();
    } else {
        $(this).parent().next().find('.box').focus();
    }
    return event.which;

// Check for 0-key
} else if (event.which === 48) {
    if ($(this).parent().is('td:last-child')) {
        $(this).closest('tr').next().children().first().find('.box').focus();
    } else {
        $(this).parent().next().find('.box').focus();
    }
    return false;

// Check for other invalid keys
} else {
    return false;
}
});

这在桌面/笔记本电脑上工作正常，但在iOS上，.keypress方法的返回值不会显示在主板上，除了最后一个方框（底部，右侧）。

我使用jQuery 3.2.1 slim和iOS 9.3.5 Chrome/Safari。

有人可以帮忙吗？

谢谢！

Answer 1

我找到了解决上述问题的方法。

我使用.keypress事件来验证和记录用户输入。

然后，在验证并记录输入后，我使用单独的.keyup事件将焦点移动到下一个框。

我不知道为什么，但显然iOS首先需要在关注焦点之前记录用户输入。否则它将不会显示返回的用户输入。

/// Only allow numbers from 1-9 (49-57) and the 'Enter' key to submit form (13)
$('.box').keypress(function(event) {
    return (event.which >= 49 && event.which <= 57) || event.which === 13;
});
// On keyup trigger move focus to the next box
$('.box').keyup(function(event) {
    if ((this.value.length === this.maxLength) || event.which === 48) {
        if ($(this).parent().is('td:last-child')) {
            $(this).closest('tr').next().children().first().find('.box').focus();
        } else {
            $(this).parent().next().find('.box').focus();
        }
    }
});

iOS上没有显示jQuery .keypress返回值

1 个答案: