Javascript HTML5 捕获 keyCode 并写入 Canvas

Question

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

干杯

Answer 1

这似乎是个坏主意，因为文本区域免费为您提供了很多文本输入(插入符号、选择、剪切、粘贴、拖放、箭头键处理等)，但这里是你需要做两件事:

1. 提供您的 <canvas>一个tabindex属性，以便它可以接收焦点，从而引发关键事件；
2. 添加 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>