Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts

    website for checking javascript keycodes

    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.
    Wayne Christian

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,516
    Thanks
    3
    Thanked 505 Times in 492 Posts
    http://www.js-examples.com/syntax/key_codes.php
    Code:
    <!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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •