javascript - Javascript HTML5 keyCodeをキャプチャし、Canvasに書き込みます

Question

テキストエリアをシミュレートする必要があるアプリケーションを作成しています。私がそれにアプローチする方法を知っている唯一の方法は、キーイベントでkeyCodeをキャプチャすることです。そのkeyCodeを取得し、utf-8をサポートして、それをキャンバスに適用するにはどうすればよいでしょうか。

乾杯

Answer 1

textareaが無料で提供するテキスト入力（ケア、選択、切り取り、貼り付け、ドラッグアンドドロップ、矢印キーの処理など）に加えて、非常に多くのテキスト入力があるため、これは悪い考えのように思えますが、ここに2つのことがあります。する必要があります ：

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>

Answer 2

jqueryの使用：

<div id="myTextArea></div>

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

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

});

Answer 3

ベスピンを見たことがありますか？これは単なるテキストエリアの置き換えではありませんが、基本的には必要なことを実行します。あなたは確かにコードとドキュメントを調べることができます、あるいはそれがあなたのニーズに合うならば、それを使うだけです。