javascript - 如果按下了有效字符，如何检查 div 上的 keydown

Question

我已经检查过是否有人问过这个问题。但是，每个问题都仅与输入或文本区域有关，对我来说没有完美的答案。请注意，我希望它适用于 div keydown。我已经设置了 div tabindex，我可以在该 div 的 keydown 事件中获取键代码。

我正在使用 jQuery 在 javascript 中创建电子表格。并且，在电子表格中，用户开始在任何列的任何行的任何单元格上键入。现在，我想检测是否按下了有效字符，以便立即在所选单元格中显示编辑文本框。

因此，当我使用 String.fromCharCode 将 keyCode 转换为字符时，我得到了所有内容的字符，即使它是 shift 键或 ctrl 键。所以，这不是我想要的。这将给我 2 个字符用于 shift & 让我们说 G。

我不知道如何检查用户是否只按下了 a、h、0、7 等有效字符，以便我像谷歌表格或 Microsoft Excel 一样立即向他显示编辑单元格。另外，我本可以检查 >= 65 等等。但是，我想让它适用于每种语言的每种类型的键盘。

我确信实现这一目标是一项非常困难的工作，但我想知道谷歌和微软是如何做到这一点的。

任何帮助将不胜感激。

Answer 1

我自己解决了这个问题。

当 div 发生 keydown 事件时，我创建一个 input 框并将其附加到 body 并将 keyup 事件附加到该输入盒子。在 keyup 事件中，我可以很容易地发现是否输入了某些内容。如果键入内容，则用户想要编辑单元格，否则我可以检查特殊键，如 Ctrl+End、Ctrl+首页等。

请注意，输入看起来很烦人，因为它会在用户开始输入时立即出现。所以，我使用 position:absolute 使其位于 -1000px 的某处。我还尝试使输入框 width 和 height 为 0，但后来我无法从框中读取 .val()。所以，我使用了 position:absolute; left:-1000px 代替。

这可能对其他人有帮助。所以，这是代码。

$(spreadsheet).keydown(function(e) {
if (e.keyCode == /*movement_keys*/) {
    //move between cells
} else {
    var input = $('<input type="text"  style="position:absolute; left: -1000px; top: 0px;"/>').appendTo('body');
    $(input).focus();
    $(input).keyup(function(e) {
        if ($(this).val() != '') {
            setTimeout(function() { spreadsheet.editCell($(this).val()); }, 1);
        }

        $(this).remove();
        $(spreadsheet).focus();
    });
}

});

我必须使用 setTimeout 函数等待 1ms 才能使焦点完美，否则焦点不会在单元格编辑器上。