如何在javascript中使用onkeyup将文本添加到不是文本框的div？答案

【问题标题】：How to use onkeyup in javascript to add text to a div that isn't a textbox?如何在javascript中使用onkeyup将文本添加到不是文本框的div？
【发布时间】：2017-08-02 04:48:51
【问题描述】：

让我先说我是 javascript 新手。

我正在尝试将 div 的内容更改为我输入的任何字母。因此，如果我在页面上的任意位置按“p”，div 文本将添加该字母。

例如：

<html>
  <head>
    <script>
      document.getElementById("change").onkeyup = function() {myFunction()};

      function myfunction(){

      }
    </script>
  </head>
<body>
  <div id=change>p</div>
</body>
</html>

函数是我卡住的地方。

我见过很多涉及在文本框中输入的示例，但没有一个没有。如果有人能指导我正确的方向，我将不胜感激。

【问题讨论】：

标签： javascript html events onkeyup

【解决方案1】：

为什么你的代码不起作用？

您不能像尝试那样在<div> 元素上使用keyup 事件，因为JavaScript 永远不会触发它，因为div 永远不会聚焦。元素必须集中以接收按键事件，否则用户将如何知道他们的键盘将输入到哪里。

对此我们能做些什么？

始终“具有焦点”的元素是网页的<body>（当然，除非您使用网络浏览器的不同区域，例如为网站添加书签、使用 URL 栏导航等）。

所以，我们可以检测页面主体上的事件，然后相应地更改 div 的内容。我们可以使用document.body.onkeyup = function(event) 检测事件，然后使用document.getElementById("change").innerHTML 更改div 内容，它通过ID 定位该div，然后将其HTML 值设置为新值。

然而，JavaScript 只会发回被按下的键的代码（它是键的内部表示），而不是键所代表的字符 - （如果您试图检测一个键是否像backspace 或 ctrl 已被按下）。我们可以使用event.keyCode从事件中获取这个值。

因此，我们必须将其转换为字符串，这是我们代码的最后一段：String.fromCharCode(event.keyCode)。这会将字符代码转换为字符串。

总的来说，我们可以更新 div 的值以响应按键。

工作示例

document.body.onkeyup = function(event) {
  document.getElementById("change").innerHTML = String.fromCharCode(event.keyCode);
}

&lt;div id="change"&gt;p&lt;/div&gt;

注意事项

如果要检测字母的大小写，可以使用onkeypress 而不是onkeyup；
如果您想将您现在输入的内容附加到 div 中已有的内容，您可以使用 += 而不是 =；
如果您只想使用 div 作为可以输入的位置，请查看contenteditable；
如果您想要不映射到字符串值的键码列表，请查看this list。

【讨论】：

@clone 当我在一个链接中完成编辑时，你发表了评论：P
很好的结构化答案。如果您需要'String.fromCharCode'未映射的其他键（例如功能键），看起来有人在这里编译了一个不错的列表：stackoverflow.com/a/23377822/4616759 ...
@BrennenSprimont 谢谢！我已将该列表添加到注释部分下的答案中。
感谢您的回答！不过，我似乎仍然有问题。在函数部分显示“= function(event) {”我收到一条错误消息，提示无法设置属性 'onkeypress' of null”。
@JaronGallo 啊。在你的 JavaScript 代码中写下window.onload = function() {，然后复制并粘贴我的答案，然后在包含额外的} 之后添加一行。这确保了窗口已加载，因此页面上引用的所有 HTML 元素都存在/可以访问。

【解决方案2】：

如果您想在按下时添加字母，可以添加使用+=。 onkeypress 也是区分大小写的，而 onkeyup 会给你大写字母。

document.body.onkeypress = function(event) {
  document.getElementById("change").innerHTML += String.fromCharCode(event.keyCode);
}

&lt;div id="change"&gt;p&lt;/div&gt;

【讨论】：