gpt4 book ai didi

javascript - 捕获书面文本而不聚焦输入元素

转载 作者:行者123 更新时间:2023-12-02 16:09:00 25 4
gpt4 key购买 nike

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

  • 我想捕获文档上的键盘事件
  • 我想更新这些事件中的文本,例如输入元素或文本区域

举个例子,假设您有一些具有焦点的元素,并且您想要跟踪写入其中的文本(例如一些简单的过滤)。我不想创建一些可见的输入元素并为其提供焦点。

我尝试了简单的解决方案,例如将事件委托(delegate)给另一个元素(在本例中为输入),因为我仍然需要根据系统区域设置等将 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 被委托(delegate)给输入元素,但它根本不更改文本。

这个例子有什么问题吗?

在我的特定案例中,有没有更好的方法可以取得结果?只是我需要更新正在由某些非输入元素处理的文本。

最佳答案

这可能有帮助:

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/

关于javascript - 捕获书面文本而不聚焦输入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30434756/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com