Friday, April 24th 2009
Handling cross-browser/platform key board events with Javascript
Although this functionality comes packaged in my cross browser core file elementary.js - I thought I'd post this up in hope others will find it useful. I still need to complete the keymap as the only keys supported currently are: Shift, Control, Up, Down, Left, Right, and Tab.
Download keys.js (New window/tab)
Usage:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Cross browser keyboard event handling</title>
<script type="text/javascript" src="keys.js"></script>
<script type="text/javascript">
//available keys are 'shift','ctl','up','down','left','right','tab'
KeyEventObservers.add('left',{
up:function(e){
//handle up event here
},
down:function(e){
//handle down event here
}
});
KeyEventObservers.add('shift',{
up:function(e){
//handle up event here
},
down:function(e){
//handle down event here
}
});
</script>
</head>
<body>
</body>
</html>
You can see an implementation on drivenstudio.com, the right and left keys move forward and backward in the slideshow.