将击键附加到 div JS答案

【问题标题】：Append keystrokes to div JS将击键附加到 div JS
【发布时间】：2016-05-24 19:46:52
【问题描述】：

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

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

【问题讨论】：

标签： javascript html css append keystrokes

【解决方案1】：

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

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

然后，只要文本框的内容发生变化，您就可以简单地将目标元素的内容替换为文本框的内容。

这样就省去了手动监听键盘事件、区分大小写字母等的麻烦。

【讨论】：

"这样就省去了手动监听键盘事件、区分大小写字母等的麻烦" - document.body.addEventListener("keypress", function(e) { console.log(String.fromCharCode(e.which); }) (fiddle)
@Andreas 很公平，大写和小写都可以。但是，当涉及换行符或退格时，您仍然会遇到麻烦

【解决方案2】：

我肯定会使用 jQuery 来捕获键，然后不断地使用 .replace() 你的 div 使用具有相同属性的 div，其中包含最新版本的更新字符串。 Codecademy 为此类 jQuery 的使用提供了丰富的课程。

不过，我并不是专家。我相信其他人的答案比我自己的更好。

【讨论】：

【解决方案3】：

这样的？

HTML

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

//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/

【讨论】：