Javascript HTML5捕获keyCode并写入画布

我在写一个应用程序，我需要模拟一个textarea。我知道如何处理它的唯一方法是在关键事件中捕获keyCode。怎么会采取这个keyCode，并支持utf-8，将其应用于画布？Javascript HTML5捕获keyCode并写入画布

干杯

2010-09-16 Russell Jones

这似乎是一个糟糕的主意，因为在文本输入方面有一个可怕的地方，textarea给你免费的（插入，选择，剪切，粘贴，拖放和箭头键处理等），但是这里就是你需要做两件事情：

给你一个<canvas>属性tabindex，以便它可以接收焦点，从而提高关键事件;
向<canvas>元素添加keypress（而不是）处理程序以捕获文本输入。

代码：

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

来源

2010-09-16 17:22:50

我认为你可能是对的，复制一个textarea似乎是一项可怕的工作，而我实际上并没有看到保留textarea的任何优点（它不是一个真正的应用程序，而更像是一个寓教于乐的游戏，发生在一个画布元素中，但需要接收文本输入）。我*想*把透明textarea放在我的画布上是最好的解决方案。 – 2010-09-16 18:29:25

虽然按键捕捉字符代码，但它不会捕捉退格。为什么使用keypress而不是keydown？ – 2014-08-21 22:19:18

@DavidR .:我会使用'keydown'作为退格并删除支持。但是，为了收集文本输入，'keypress'是唯一的关键事件，它为您提供有关输入字符的数据，因此是唯一的选择。见http://unixpapa.com/js/key.html – 2014-08-21 22:35:48

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

来源

2010-09-16 17:20:42

你怎么知道他们想要什么？你是一个心灵读者吗？ – strager 2010-09-16 17:36:57

我会换个话题 - 它完成了他们询问的具体要求：“Javascript HTML5捕获keyCode并写入画布”作为纯粹的基于画布的文本编辑器，他们捕获键入的键并使用画布显示 - 除此之外。 – 2010-09-16 19:04:58

使用jQuery：

<div id="myTextArea></div> 

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

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

});

来源

2010-09-16 17:26:36 Rohrbs

Javascript HTML5捕获keyCode并写入画布

回答

相关问题