如何实时捕获击键并将其添加到 div 元素？答案

【问题标题】：How to capture and add keystrokes to a div element in realtime?如何实时捕获击键并将其添加到 div 元素？
【发布时间】：2015-10-07 14:57:42
【问题描述】：

在下面的代码中，我试图获取按键并将其添加到我的 div 元素中。例如：如果我按下诸如“fhjbfwjbj”之类的随机键，则应将其添加到 div 中的文本中。：

<script>
function type()
    {
        var edit = document.getElementById("add");
        edit.innerHTML=edit.innerHTML + //WHAT TO ADD?????;
    }
</script>

<body onkeypress="type()">
<div id="add" style="position:relative; left:600px; top:170px;">

Add to this text

</div>
</body>

【问题讨论】：

有什么理由不使用像 jQuery 这样的框架？
将console.log(arguments) 放入函数中，查看浏览器向您的方法发送的内容。你不能让 div 内容可编辑吗？

标签： javascript html keystrokes

【解决方案1】：

类似这样的：

document.body.onkeypress = function(evt) {
  var edit = document.getElementById("add");
  edit.innerHTML=edit.innerHTML + String.fromCharCode(evt.which || evt.keyCode);
}

【讨论】：

这会给你像'键这样的键提供奇怪的字符，它们都将大写。
真的吗？我现在正在控制台中对其进行测试，字母数字字符似乎可以正常工作，而无需转换为大写字母。
这就是过去我做这件事时它为我做的事情；认为它会为你做。你用的是什么浏览器？
哦，哇，你是对的。这是我的代码的问题；我猜我学到了一些东西；谢谢！

【解决方案2】：

将 onkeypress 更改为 onkeyup（不过，这只是一个偏好问题），然后您的函数应该接受一个事件 arg，例如function type(evt)，密钥将在 keyCode 属性中，即evt.keyCode。

【讨论】：