<style type= "Text/css" > TD {text-align:center} </STYLE> <script language= "JavaScript" > function ini T () {Document.onkeydown = Showkeydown Document.onkeyup = Showkeyup document.onkeypress = showkeypress} function Showkeydown (evt) {evt = (evt)? Evt:window.event document.getElementById ("Presskeycode"). InnerHTML = 0 document.getElementById ("Upkeycode"). InnerHTML = 0 document.getElementById ("Presscharcode"). InnerHTML = 0 document.getElementById ("Upcharcode"). InnerHTML = 0 restoremodifiers ("") restoremodifiers ("Down") restor Emodifiers ("Up") document.getElementById ("Downkeycode"). InnerHTML = Evt.keycode if (evt.charcode) {doc Ument.getelementbyid ("Downcharcode"). InnerHTML = Evt.charcode} showmodifiers ("Down", evt)} function Showkeyu P (evt) {evt = (evt)? Evt:window.event document.getElementById ("Upkeycode"). InnerHTML = Evt.keycode if ( Evt.charcode) { document.getElementById ("Upcharcode"). InnerHTML = Evt.charcode} showmodifiers ("Up", evt) return false} function Showkeypress (evt) {evt = (evt)? Evt:window.event document.getElementById ("Presskeycode"). InnerHTML = Evt.keycode if (evt.charcode) {document.getElementById ("Presscharcode"). InnerHTML = Evt.charcode} Showmodifiers ("", evt) return false} function showmodifiers (ext, evt) {restoremodifiers (EXT) if (E Vt.shiftkey) {document.getElementById ("shift" + ext). Style.backgroundcolor = "#ff0000"} if (Evt.ctrlk EY) {document.getElementById ("Ctrl" + ext). Style.backgroundcolor = "#00ff00"} if (Evt.altkey) { document.getElementById ("alt" + ext). Style.backgroundcolor = "#0000ff"}} function Restoremodifiers (EXT) { document.getElementById ("Shift" + ext). Style.backgroundcolor = "#ffffff" document.getElementById ("Ctrl" + EXT). styl E.backgroundcolor = "#ffFFFF "document.getElementById (" alt "+ ext). Style.backgroundcolor =" #ffffff "} </SCRIPT> </HEAD> ; Body onload= "init ()" > <p>keyboard Event Handler lab</p> <HR> <FORM> <table border=2 CE Llpadding=2> <TR><TH></TH><TH>onKeyDown</TH><TH>onKeyPress</TH> <TH>onKeyUp</TH></TR> <tr><th>key codes</th> <td id= "Downkeycode" >0</ td> <td id= "Presskeycode" >0</TD> <td id= "Upkeycode" >0</TD> </TR> <TR>&L T;th>char codes (IE5/MAC; NN6) </TH> <td id= "Downcharcode" >0</TD> <td id= "Presscharcode" >0</TD> <td I D= "Upcharcode" >0</TD> </TR> <tr><th rowspan=3>modifier keys</th> <td><spa N id= "Shiftdown" >Shift</SPAN></TD> <td><span id= "Shift" >Shift</SPAN></TD> <td&gT;<span id= "Shiftup" >Shift</SPAN></TD> </TR> <TR> <td><span id= "Ctrldown" ; ctrl</span></td> <td><span id= "Ctrl" >Ctrl</SPAN></TD> <td><span id= "Ctrlup" >Ctrl</SPAN></TD> </TR> <TR> <td><span id= "Altdown" >alt</span> ;</td> <td><span id= "alt" >Alt</SPAN></TD> <td><span id= "Altup" >Alt< /span></td> </TR> </TABLE> </FORM>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]