Javascript HTML5 捕获 keyCode 并写入 Canvas

Question

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

干杯

Answer 1

这似乎是一个坏主意，因为文本区域免费为您提供了很多超出文本输入的内容（脱字符号、选择、剪切、粘贴、拖放、箭头键处理等），但这里有两件事您可以做需要做的：

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

代码：

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

Answer 2

使用jquery：

<div id="myTextArea></div>

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

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

});

Answer 3

您看过 Bespin 吗？它不仅仅是文本区域的替换，但它基本上可以满足您的需求。您当然可以查看代码和文档，或者如果它符合您的需求，就使用它。