Javascript HTML5 Capture keyCode and write to Canvas
I'm writing an application in which I need to simula开发者_Go百科te 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
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 :
- Give your
<canvas>
atabindex
attribute so that it may receive focus and hence raise key events; - Add a
keypress
(notkeydown
) 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>
Using jquery:
<div id="myTextArea></div>
$('#myTextArea').keypress(function (event) {
$('#myTextArea').append(String.fromCharCode(event.which));
});
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.
精彩评论