在不聚焦输入元素的情况下捕获书面文本答案

【问题标题】：Capture written text without focusing input element在不聚焦输入元素的情况下捕获书面文本
【发布时间】：2015-05-25 09:08:35
【问题描述】：

我正在尝试实现简单的场景：

我想捕捉文档上的键盘事件
我想根据输入元素或 textarea 等事件更新文本

举个例子，假设您有一些具有焦点的元素，并且您想要跟踪写入其中的文本（例如一些简单的过滤）。我不想创建一些可见的输入元素并赋予它焦点。

我尝试了简单的解决方案，例如将事件委托给另一个元素（在这种情况下为输入），因为我仍然需要根据系统语言环境等将 keyCode 转换为有效字符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function initialize() {
            console.log('initializing');
            var body = document.getElementsByTagName('body')[0];
            var input = document.getElementById('text');

            function delegateEvent(e) {
                if (e.__delegate) {
                    return;
                }

                var ev = new e.constructor(e.type, e);
                ev.keyCode = e.keyCode;
                ev.__delegate = true;
                input.dispatchEvent(ev);
            }

            body.addEventListener('keydown', function (e) {
                delegateEvent(e);
            }, false);
            body.addEventListener('keyup', function (e) {
                delegateEvent(e);
            }, false);

            input.addEventListener('keydown', function (e) {
                console.log('input keydown', e);
            });

            input.addEventListener('keyup', function (e) {
                console.log('input keyup', e);
            });
        }
    </script>
</head>
<body onload="initialize()" tabindex="0">
    <div>
        <input type="text" id="text" />
    </div>
</body>
</html>

但是这对我不起作用。由于某些我不知道的原因，KeyboardEvent 被委托给输入元素，但它根本不更改文本。

这个例子有什么问题？

在我给定的情况下，有没有更好的方法来实现结果？只是我需要更新一些非输入元素正在处理的文本。

【问题讨论】：

“我不想创建一些可见的输入元素并赋予它焦点。”这是什么意思？我不明白你想在文档本身上输入它吗？
听起来您正试图从文档中捕获关键事件并将它们传递给输入进行处理。您能解释一下为什么要这样做（而不是仅仅根据事件更新输入元素的值吗？）
对我来说听起来像是键盘记录器 :)

标签： javascript html input dom-events

【解决方案1】：

这可能会有所帮助：

var input = document.getElementById('text');

function appendCharacter (c) {
    switch (c) {
        case 8: // Backspace
            input.value = input.value.slice(0, -1);
            break;
        default:
            input.value = input.value + String.fromCharCode(c);
    }
}

// Keypress gets the keyCode of the current character not key.
// e.g. pressing the 'A' key will result in 'a' unless 'Shift' is also held.
window.addEventListener('keypress', function (e) {
    console.log(e.charCode)
    console.log(e.keyCode)
    appendCharacter(e.keyCode);
});

// Use Keydown to get special keys like Backspace, Enter, Esc.
window.addEventListener('keydown', function (e) {
    switch (e.keyCode) {
        case 8: // Backspace
            e.preventDefault(); // Stops the backspace key from acting like the back button.
            appendCharacter(e.keyCode);
            break;
    }
});

试试看：https://jsfiddle.net/vuoriliikaluoma/9u29wyzd/

【讨论】：

这只是部分解决方案，我在过去的实现中就有（大致相似）。想象一下 BACKSPACE、DELETE 等控制键。我确信在这种情况下，并非文本编辑输入的所有功能都是必需的，但至少基本的文本控制功能也应该可用。我可以想象编写一些控制代码，如if (isBackspace(e)) deleteChar() 等，但我问这个问题的主要原因是确定所有可能性。
我已经更新了处理退格和类似的代码。看看吧。