将击键附加到 div JS

Question

我想知道哪个框架（如果有的话）最适合实现捕获击键并将它们附加到 "p" 元素。我想要实现的是让客户在键盘上键入一些内容，然后将那句话或其他任何内容附加到 html，从而在 "p" 元素中显示它。

重要通知；我不是想在给定的按键上调用函数 - 例如。 shift+alt，而不是我想做的是，将键盘敲击流式传输到 html 元素。

Answer 1

我肯定会使用 jQuery 来捕获密钥，然后不断地 .replace() 您的 div 与 div 具有相同的属性，其中包含最新版本的更新字符串。 Codecademy 有大量关于此类 jQuery 使用的课程。

虽然我不是专家。我确定其他人的答案比我自己的更好。

Answer 2

您不一定需要该任务的框架。

除了 Kai Christensen 的方法之外，另一个可能可行的选择是在可见屏幕区域之外创建一个文本框，自动将焦点设置到该文本框并为该文本框创建一个更改侦听器.

然后，只要目标元素的内容发生变化，您就可以用文本框的内容替换它。

省去手动监听键盘事件，区分大小写等麻烦

Answer 3

是这样的吗？

Html

<p id="text"></p>
<input id="textinput"></input>

Js

//Register on keyup, append text from input-field to <p> element.
window.addEventListener("keyup", function () {
    document.getElementById("text").innerHTML=document.getElementById('textinput').value;
});

jsfiddle: https://jsfiddle.net/vwobq9xf/1/

将击键附加到 div JS

Append keystrokes to div JS

html

javascript

css

append

keystrokes