CODEWITHSUNDEEP
javascripthtmlcanvaskeycode
Russell
Russell

Reputation: 978

Javascript HTML5 Capture keyCode and write to Canvas

I'm writing an application in which I need to simulate a textarea. The only way I know how to approach it is to capture the keyCode on a key event. How would one go about taking that keyCode and, supporting utf-8, apply that to the canvas?

Cheers

Upvotes: 7

Views: 10753

Answers (3)

Rohrbs
Rohrbs

Reputation: 1855

Using jquery:

<div id="myTextArea></div>

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

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

});

Upvotes: 3

Tim Down
Tim Down

Reputation: 324647

This seems like a bad idea since there is an awful lot over and above text input that a textarea gives you for free (caret, selection, cut, paste, drag and drop, arrow key handling, etc.), but here's two things you need to do :

  1. Give your <canvas> a tabindex attribute so that it may receive focus and hence raise key events;
  2. Add a keypress (not keydown) handler to the <canvas> element to capture text input.

Code:

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

Upvotes: 10

Russell Leggett
Russell Leggett

Reputation: 8883

Have you seen Bespin? It is more than just a textarea replacement, but it basically does what you want. You could certainly look into the code and documentation, or if it fits your needs, just use it.

Upvotes: 1

Related Questions