无法检测到在移动设备(文本区域）上按输入

Can't detect enter press on mobile (textarea)

本文关键字：区域 文本 输入 检测 移动      更新时间：2023-09-26

要检测输入按，我正在使用简单的解决方案：

if (e.keyCode == 13) {
    // do something
}

在桌面上，它可以在任何地方正常工作。在平板电脑，智能手机上 - 也是 - 但是，如果涉及到文本区域，这是行不通的。

自从上次Chrome更新很少以来，它就成为一个问题。

因此，当您从移动设备按回车键时，您只看到换行符"'"，但没有执行函数。

那么，如何在最新的chrome版本上检测移动设备上的文本区域输入？

虽然这可能是Chrome特定的错误，但这些可能是一些可能的解决方案：

  1. 还要检查e.which：

    var key = e.which || e.keyCode || 0;
if (key == 13) {
    // do something
}

  2. 尝试其他事件：例如，如果您使用的是keyUp，请尝试keyPress

如果

这仍然不起作用，如果检测很重要，您可能需要解决方法。您可以跟踪该值，并在使用 input 事件将"'"添加到文本区域时进行检测。

var textarea = document.getElementById('your-textarea');
var textareaValue = textarea.value;
var textareaLines = getLines(textareaValue);
function getLines(str) {
    // This uses RegEx to match new lines.
    // We use || [] because it would otherwise fail if there weren't
    // any line breaks yet.
    return (str.match(/['n'r]/g) || []).length;
}
textarea.addEventListener('input', function() {
    var newValue = textarea.value;
    var newLines = getLines(newValue);
    if (newLines > textareaLines
        && newValue.length == textareaValue.length + 1) {
        // We also check that the new length is only one
        // character longer to not fire this new line event
        // after a copy-paste with a new line character.
        doSomething();
    }
    textareaValue = newValue;
    textareaLines = newLines;
}, false);

如果像我一样使用反应，onKeyPress={e => e.key}工作。

e.key在浏览器和移动设备上返回"输入"

e.code仅在浏览器上返回"输入"

相关文章：