jQuery .keypress 返回值在 iOS 上不显示答案

【问题标题】：jQuery .keypress return value does not show on iOSjQuery .keypress 返回值在 iOS 上不显示
【发布时间】：2018-01-06 19:36:05
【问题描述】：

我有一个 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。

谁能帮忙？

谢谢！

【问题讨论】：

标签： jquery html ios

【解决方案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();
        }
    }
});

【讨论】：