Question

So far I’ve found many different articles on it but they all seem to have conflicting advice and different levels of compatibility with different browsers. All a huge headache. Is there a fuss free way to parse a user’s keystrokes in a canvas element?

Even snippets such as this for disabling the shortcut keys don’t work for all browsers.

if(e.preventDefault) // non-IE browsers
        e.preventDefault();
    else  // IE Only
        e.returnValue = false;

Right now I’m using

document.addEventListener('keypress', KeyPressed, true); 

and

var keyCode = String.fromCharCode(e.charCode);

It works fine in firefox but nowhere else.

I’ll probably get it working eventually but is there a fuss free way to do it without pulling all my hair out? Seems strange that such a seemingly common feature would be so hard to implement. Thanks!

Answer 1

“is there a fuss free way to do it without pulling all my hair out? ”
Yea! You can if you use jQuery .
Because jQuery can make life easier for you and works cross browser too.

Just add this to your code,

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $(document).keypress(function(event){
    if (event.which == 13)
        alert("You pressed the Enter Key");
    });
});
</script>