...

View Full Version : website for checking javascript keycodes



wac
12-27-2005, 05:30 AM
I remembered that there was a website where one could check the results of various combinations of keypress, keyup, keydown events and how they were detected b y the browser, but I can't remember the site. Any one hve any idea? I'm trying to deal with the subtle differneces of when certain keys generate events (onkeypress, vs onkeydown, vs onkeyup) and in which browser.

I'm having an issue where I'm looking for the cursor keys. onkeydown seems to work fine in IE, but not in Fire Fox.

vwphillips
12-27-2005, 09:23 AM
http://www.js-examples.com/syntax/key_codes.php



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function CreateTable(rows,rowh,cols,colw){
table=document.createElement('TABLE');
table.border=1;
tbody=document.createElement('TBODY');
table.appendChild(tbody);
for (zxc0=0;zxc0<rows;zxc0++){
tr=document.createElement('TR');
tr.height=rowh;
for (zxc1=0;zxc1<cols;zxc1++){
td=document.createElement('TD');
td.width=colw;
ip=document.createElement('INPUT');
ip.type='text';
ip.size='15';
ip.name='MyNameR'+zxc0+'C'+zxc1;
ip.id='MyNameR'+zxc0+'C'+zxc1;
ip.value=ip.id;
zxcAddFocus(ip);
zxcAddMyKey(ip);
td.appendChild(ip);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
document.getElementById('Table').appendChild(table);
document.getElementById('data').style.color='black';
}

function MyFocus(){
document.getElementById('data').firstChild.data='My ID and Name are: '+this.id+' My value is:\n'+this.value
}

function MyKey(){
if (this.set){ return; }
this.onkeypress=function(evt){ ClearText(evt?evt.keyCode:event.keyCode); }
this.onkeydown=function(evt){ ClearText(evt?evt.keyCode:event.keyCode); }
this.set=true;
}

function ClearText(e){
if (String.fromCharCode(e)=='C'||String.fromCharCode(e)=='c'){
document.getElementById('data').firstChild.data=' ';
}
}

//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// example Add Event

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddMyKey(zxc){
if (zxc.addmykey){ return; }
zxc.addmykey=MyKey;
zxcEventAdd(zxc,'focus','addmykey');
}

function zxcAddFocus(zxc){
if (zxc.addfocus){ return; }
zxc.addfocus=MyFocus;
zxcEventAdd(zxc,'focus','addfocus');
}

function zxcAddAlert(zxc){
if (zxc.addAlert){ return; }
zxc.addAlert=MyAlert;
zxcEventAdd(zxc,'click','addAlert');
}

function MyAlert(){
// Note the object instigating the event is passed to this function

alert('Added alert to '+this.title);
}

//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--

function KeyCodes(){
document.getElementById('KP').onclick=null;
document.onkeypress=function(evt){ KeyPress(evt?evt.keyCode:event.keyCode); }
document.onkeydown=function(evt){ KeyPress(evt?evt.keyCode:event.keyCode); }
}

function KeyPress(e){
document.getElementById('KP').value=String.fromCharCode(e)+' = KeyCode '+e;
if (e==37){ document.getElementById('KP').value='LeftArrow'; }
if (e==38){ document.getElementById('KP').value='UpArrow'; }
if (e==39){ document.getElementById('KP').value='DownArrow'; }
if (e==40){ document.getElementById('KP').value='DownArrow'; }

}

//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--

function Test(e){
eobj=(e&&e.target)||(event&&event.srcElement);
if (eobj.nodeType==3) eobj=tt_eobj.parentNode;
if (eobj!=document.getElementById('fred')){
document.getElementById('fred').style.visibility='hidden';
}
}

document.onclick=function(evt){ Test(evt); }

//-->
</script>
</head>

<body >
<div id="fred" style="width:100px;height:100px;background-color:red;" ></div>
Hi,

I'm trying to create TD and TR elements in Javascript.<br>
Using document.createElement("tr") and document.createElement("td");<br>
<center id="Table" >
<input type="button" value="Make Table" onclick="CreateTable(4,30,3,150);" ><br>
<span id=data style="color:white;" >Focus a Text Box<br>then depress 'c' to clear</span>
</center>
Also to catch mouse events i use,<br>
setAttribute("onmouseout", "this.className='mouseOver';");<br>
<br>
IE considers the event to be a property, Mozilla an attribute<br>
For simple applications I use<br>
obj.onmouseout=function(){ MyFunction(parameters); }<br>
or if no parameters<br>
obj.onmouseout=MyFunction; <br>
<br>
However this does not add the event, it replaces any existing HTML coded event<br>
<input type="button" title="My Button" value="Add Event" onclick="alert('HTML code event');zxcAddAlert(this);" ><br>
<br>
<br>
How to handle ARROW KEY events like mouseover .Pls help.
Press the button below to veiw Key Codes when depress a key<br>
JS-Examples has a <a href="http://www.js-examples.com/syntax/key_codes.php">list of codes</a><br>
<input id="KP" type="button" value="View Key Codes" onclick="KeyCodes();" ><br>

Thanks in Advance

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum