Welcome to WebmasterWorld Guest from 54.161.116.225

Forum Moderators: open

Message Too Old, No Replies

How can I capture keyboard event with multiple keys?

How can I capture keyboard events with multiple key combinations?

     
9:43 pm on Oct 25, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 14, 2002
posts:153
votes: 0


How can I capture a keyboard event of say ctrl+s, ctrl+shift+s and ctrl+p? I've read quite a few discussions and articles talking about capturing keyboard events however I've yet to figure out how to do this when multiple keys are press.

I require it to work in IE, Mozilla based browsers and if possible Opera.

Any direction would be much appreciated!

4:39 am on Oct 26, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2004
posts:1181
votes: 0


You really can't do much with the control key, as some browsers use it for keyboard shortcuts and intercept it before it gets to any scripts. Even using single keys can have its challenges. For instance Konqueror (and therefore, presumably, Safari) only registers onkeydown. While FF, IE and Op all register a lower case 'd' as 68 in onkeydown and the same for upper case, K registers 100 lower case, 68 upper. That's just for starters. Try this on a few browsers to see what I mean:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td,th{border:2px solid #aaa;}
</style>
<script type="text/javascript">
var t_cel,tc_ln;
if(document.addEventListener){ //code for Moz
document.addEventListener("keydown",keyCapt,false);
document.addEventListener("keyup",keyCapt,false);
document.addEventListener("keypress",keyCapt,false);
}else{
document.attachEvent("onkeydown",keyCapt); //code for IE
document.attachEvent("onkeyup",keyCapt);
document.attachEvent("onkeypress",keyCapt);
}
function keyCapt(e){
if(typeof window.event!="undefined"){
e=window.event;//code for IE
}
if(e.type=="keydown"){
t_cel[0].innerHTML=e.keyCode;
t_cel[3].innerHTML=e.charCode;
}else if(e.type=="keyup"){
t_cel[1].innerHTML=e.keyCode;
t_cel[4].innerHTML=e.charCode;
}else if(e.type=="keypress"){
t_cel[2].innerHTML=e.keyCode;
t_cel[5].innerHTML=e.charCode;
}
}
window.onload=function(){
t_cel=document.getElementById("tblOne").getElementsByTagName("td");
tc_ln=t_cel.length;
}
</script>
</head>
<body>
<table id="tblOne">
<tr>
<th style="border:none;"></th><th>onkeydown</th><th>onkeyup</th><th>onkeypress</td>
</tr>
<tr>
<th>keyCode</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<th>charCode</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>
<button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML='&nbsp;'};">CLEAR</button>
</body>
</html>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members