Javascript HTML5 Capture keyCode и запись в Canvas

Question

Я пишу приложение, в котором мне нужно смоделировать текстовую область. Единственный способ, которым я знаю, как подойти к этому, - захватить keyCode для ключевого события. Как можно было бы взять этот keyCode и, поддерживая utf-8, применить его к холсту?

Приветствия

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>

Answer 2

Использование jquery:

<div id="myTextArea></div>

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

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

});

Answer 3

Вы видели Беспин ? Это больше, чем просто замена текстовой области, но она в основном делает то, что вы хотите. Вы, конечно, можете посмотреть код и документацию, или, если вам это нужно, просто использовать.