Javascript HTML5捕获keyCode并写入Canvas答案

【问题标题】：Javascript HTML5 Capture keyCode and write to CanvasJavascript HTML5捕获keyCode并写入Canvas
【发布时间】：2010-09-16 17:14:29
【问题描述】：

我正在编写一个需要模拟文本区域的应用程序。我知道如何处理它的唯一方法是捕获关键事件的 keyCode。如何获取该 keyCode 并在支持 utf-8 的情况下将其应用于画布？

干杯

【问题讨论】：

标签： javascript html canvas keycode

【解决方案1】：

这似乎是个坏主意，因为除了文本输入之外，textarea 还免费提供了很多内容（插入符号、选择、剪切、粘贴、拖放、箭头键处理等），但这里有你需要做的两件事：

为您的<canvas> 提供tabindex 属性，以便它可以接收焦点并因此引发关键事件；
将keypress（不是keydown）处理程序添加到<canvas> 元素以捕获文本输入。

代码：

<canvas id="textarea" tabindex="1" width="300" height="200"></canvas>

<script type="text/javascript">
   var el = document.getElementById("textarea");
   el.onkeypress = function(evt) {
       var charCode = evt.which;
       var charStr = String.fromCharCode(charCode);
       alert(charStr);
   };
</script>

【讨论】：

我认为您可能是对的，复制 textarea 似乎需要做很多工作，而且我实际上没有看到将 textarea 排除在外的任何好处（它不是真正的应用程序，而是更多一个寓教于乐的游戏，其中一切都发生在画布元素中，但需要接收文本输入）。我认为在我的画布上放置一个透明的文本区域是最好的解决方案。
虽然按键捕获字符代码，但它不捕获退格键。为什么使用 keypress 而不是 keydown？
@DavidR.：我会使用keydown 来支持退格和删除。但是，对于收集文本输入，keypress 是唯一可以为您提供有关键入字符的数据的关键事件，因此是唯一的选择。见unixpapa.com/js/key.html
@Tim-Down，很棒的资源！总结一下我从那篇文章和其他地方的研究中了解到的内容，区别在于扫描码（keydown）v.字符码（keypress）。 Keydown 将识别正在按下的键，但不会通知键的组合（例如 shift/caps-lock）。这对我的情况很好，因为大小写不是问题，但使用 keydown 不会定义大写状态。此外，正如文章所示，keydown 与文化无关，并且会限制本地化/语言问题。强烈推荐这篇文章，非常有见地。
@DavidR.：是的，这符合我的理解。

【解决方案2】：

使用 jquery：

<div id="myTextArea></div>

$('#myTextArea').keypress(function (event) {

    $('#myTextArea').append(String.fromCharCode(event.which));

});

【讨论】：

【解决方案3】：

你见过Bespin吗？它不仅仅是 textarea 的替代品，而且它基本上可以满足您的需求。您当然可以查看代码和文档，或者如果它符合您的需要，就使用它。

【讨论】：

我会改写 - 它完成了他们询问的特定要求：“Javascript HTML5 Capture keyCode and write to Canvas” 作为一个纯基于画布的文本编辑器，他们捕获输入的键并使用画布显示它- 除其他外。