JavaScript DHTML/Event/Key Event

Содержание

1 Catches and manages the keyboard"s events
2 Checking Events for Key and Mouse Button Pressed
3 Checking Events for Modifier Keys
4 "ctrlKey" Example
5 "ctrlLeft" Example
6 Displaying charCode and keyCode Property Values
7 Displaying keyCode Property Values
8 Get key code in key down event (IE)
9 Handle arrow key, control, alt
10 Key and Character Codes vs. Event Types
11 Keyboard Event Handler Laboratory
12 "keyCode" Example
13 Press F1 to trigger the help event
14 "shiftKey" Example
15 Shift key pressed?
16 "shiftLeft" Example
17 Unicode of the key pressed

Catches and manages the keyboard"s events

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>JsLib 1.3 - Exemple - clavier.js</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <META NAME="Author" CONTENT="Etienne CHEVILLARD">
    <!-- clavier.js -->
    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
/* clavier.js
 * Role : capture et gere les evenements clavier
 * Projet : JsLib
 * Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
 * Version : 1.3
 * Creation : 28/07/2001
 * Mise a jour : 23/02/2005
 * Bogues connues : - Netscape Navigator 4 et Opera ignorent certaines touches de fonction
 */
// capture les evenements sous Netscape Navigator
if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
  document.captureEvents(Event.KEYPRESS);
  document.captureEvents(Event.KEYUP);
}
// --- Variables globales ---
// correction du code des touches
var clavier_un=-1;
var clavier_deux=-1;
// correspondance code/role pour les touches de fonction
var clavier_cds=new Array(146);
clavier_cds[8]="Retour arriere";
clavier_cds[9]="Tabulation";
clavier_cds[12]="Milieu (pave numerique)";
clavier_cds[13]="Entree";
clavier_cds[16]="Shift";
clavier_cds[17]="Ctrl";
clavier_cds[18]="Alt";
clavier_cds[19]="Pause";
clavier_cds[20]="Verr Maj";
clavier_cds[27]="Echap";
clavier_cds[32]="Espace";
clavier_cds[33]="Page precedente";
clavier_cds[34]="Page suivante";
clavier_cds[35]="Fin";
clavier_cds[36]="Debut";
clavier_cds[37]="Fleche gauche";
clavier_cds[38]="Fleche haut";
clavier_cds[39]="Fleche droite";
clavier_cds[40]="Fleche bas";
clavier_cds[44]="Impr ecran";
clavier_cds[45]="Inser";
clavier_cds[46]="Suppr";
clavier_cds[91]="Menu Demarrer Windows";
clavier_cds[92]="Menu Demarrer Windows";
clavier_cds[93]="Menu contextuel Windows";
clavier_cds[112]="F1";
clavier_cds[113]="F2";
clavier_cds[114]="F3";
clavier_cds[115]="F4";
clavier_cds[116]="F5";
clavier_cds[117]="F6";
clavier_cds[118]="F7";
clavier_cds[119]="F8";
clavier_cds[120]="F9";
clavier_cds[121]="F10";
clavier_cds[122]="F11";
clavier_cds[123]="F12";
clavier_cds[144]="Verr Num";
clavier_cds[145]="Arret defil";
// --- Fonctions ---
// retourne le code clavier de la derniere touche enfoncee
function codeTouche(e) {
  var cret;
  if (window.event) {
    if (parseInt(clavier_deux)>0) cret=clavier_deux;
    else cret=window.event.keyCode;
    if (window.event.type=="keypress") clavier_deux=window.event.keyCode;
    if (window.event.type=="keydown") clavier_deux=-1;
  } else {
    if (parseInt(clavier_deux)>0) cret=clavier_deux;
    else if ((parseInt(clavier_un)>0) && (e.which<1)) cret=clavier_un;
    else cret=e.which;
    if (e.type=="keydown") {
      clavier_un=e.which;
      clavier_deux=-1;
    }
    if (e.type=="keypress") clavier_deux=e.which;
  }
  return (parseInt(cret));
} // fin codeTouche(e)
// retourne le caractere ou la fonction pour la derniere touche enfoncee
function correspTouche(e) {
  var ccod=codeTouche(e);
  if (toucheCtrl(e) && toucheAlt(e)) return "Alt Gr";
  if (parseInt(ccod)==8) return clavier_cds[ccod];
  if (parseInt(ccod)==9) return clavier_cds[ccod];
  if (parseInt(ccod)==13) return clavier_cds[ccod];
  if (parseInt(ccod)==27) return clavier_cds[ccod];
  if (parseInt(ccod)==32) return clavier_cds[ccod];
  if ((clavier_cds[ccod]) && (parseInt(clavier_deux)<1)) {
    return (clavier_cds[ccod]);
  } else {
    return (String.fromCharCode(ccod));
  }
} // fin correspTouche(e)
// retourne vrai si la touche Alt a ete enfoncee avec la derniere touche
function toucheAlt(e) {
  if (window.event) {
    return (window.event.altKey);
  } else {
    return (e.altKey || (e.modifiers % 2));
  }
} // fin toucheAlt(e)
// retourne vrai si la touche Ctrl a ete enfoncee avec la derniere touche
function toucheCtrl(e) {
  if (window.event) {
    return (window.event.ctrlKey);
  } else {
    return (e.ctrlKey || (e.modifiers==2) || (e.modifiers==3) || (e.modifiers>5));
  }
} // fin toucheCtrl(e)
// retourne vrai si la touche Shift a ete enfoncee avec la derniere touche
function toucheShift(e) {
  if (window.event) {
    return (window.event.shiftKey);
  } else {
    return (e.shiftKey || (e.modifiers>3));
  }
} // fin toucheShift(e)
    
    </SCRIPT>
  </HEAD>
  <BODY onLoad="document.f1.ta1.focus()">
    <H1>JsLib 1.3</H1>
    <HR>
    <H2>Exemple - clavier.js</H2>
    <NOSCRIPT>
      <P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configur&eacute; pour ne
      pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
      configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>
      <HR>
    </NOSCRIPT>
    <FORM ACTION="GET" NAME="f1" onSubmit="return false">
      <P>Appuyez sur n"importe quelle touche du clavier...<BR>
        <TEXTAREA NAME="ta1" ROWS=5 COLS=60></TEXTAREA>
      <TABLE SUMMARY="table" BORDER=1 CELLSPACING=0 CELLPADDING=5><TR><TD>
        <TABLE SUMMARY="table" BORDER=0 CELLSPACING=0 CELLPADDING=0><TR>
          <TD VALIGN="top">
            Type de l"&eacute;v&eacute;nement :&nbsp;
          </TD><TD>
            <INPUT TYPE="radio" NAME="r1"> Touche enfonc&eacute;e (<I>keydown</I>)<BR>
            <INPUT TYPE="radio" NAME="r1"> Touche maintenue enfonc&eacute;e (<I>keypress</I>)<BR>
            <INPUT TYPE="radio" NAME="r1"> Touche relach&eacute;e (<I>keyup</I>)<BR>
          </TD>
        </TR></TABLE>
      <P>Code de la touche :
        <INPUT TYPE=TEXT NAME="t1" VALUE="">
      <P>Caract&egrave;re ou fonction correspondant :
        <INPUT TYPE=TEXT SIZE=30 NAME="t2" VALUE="">
      <TABLE SUMMARY="table" BORDER=0 CELLSPACING=0 CELLPADDING=0><TR>
        <TD VALIGN="top">Touches de raccourcis clavier :&nbsp;</TD>
        <TD> <INPUT TYPE="checkbox" NAME="c1"> Ctrl<BR>
          <INPUT TYPE="checkbox" NAME="c2"> Alt</TD>
        <TD>&nbsp; } Alt Gr </TD>
        </TR><TR>
        <TD>&nbsp;</TD>
        <TD> <INPUT TYPE="checkbox" NAME="c3"> Shift</TD>
        <TD>&nbsp;</TD>
      </TR></TABLE>
      </TD></TR></TABLE>
    </FORM>
    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
      document.onkeydown = toucheEnfoncee;
      function toucheEnfoncee(e) {
        document.f1.r1[0].checked = true;
        majFormulaire(e);
      }
      document.onkeypress = toucheMaintenueEnfoncee;
      function toucheMaintenueEnfoncee(e) {
        document.f1.r1[1].checked = true;
        majFormulaire(e);
      }
      document.onkeyup = toucheRelachee;
      function toucheRelachee(e) {
        document.f1.r1[2].checked = true;
        majFormulaire(e);
      }
      function majFormulaire(e) {
        document.f1.t1.value = codeTouche(e);
        document.f1.t2.value = correspTouche(e);
        document.f1.c1.checked = toucheCtrl(e);
        document.f1.c2.checked = toucheAlt(e);
        document.f1.c3.checked = toucheShift(e);
      }
    </SCRIPT>
  </BODY>
</HTML>

Checking Events for Key and Mouse Button Pressed

 
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Button and Key Properties</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function checkWhich(evt) {
    evt = (evt) ? evt : (window.event) ? window.event : ""
    if (evt) {
        var thingPressed = ""
        var elem = (evt.target) ? evt.target : evt.srcElement
        if (evt.which) {
            thingPressed = evt.which
        } else {
            if (elem.type == "textarea") {
                thingPressed = evt.keyCode
            } else if (elem.type == "button") {
                thingPressed = evt.button
            }
        }
        status = thingPressed
    }
    return false
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Button and Key Properties</H1> (results in the status bar)
<HR>
<FORM>
<P>Mouse down atop this
<INPUT TYPE="button" VALUE="Button" onMouseDown="checkWhich(event)"> 
this link</A> or this
<INPUT TYPE="button" VALUE="Button" onMouseDown="checkWhich(event)"> 
with either mouse button (if you have more than one).</P>
<P>Enter some text with uppercase and lowercase letters:
<TEXTAREA COLS=40 ROWS=4 onKeyPress="checkWhich(event)" WRAP="virtual">
</TEXTAREA></P>
</FORM>
</BODY>
</HTML>

Checking Events for Modifier Keys

 
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Event Modifiers</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function checkMods(evt) {
    evt = (evt) ? evt : (window.event) ? window.event : ""
    if (evt) {
        var elem = (evt.target) ? evt.target : evt.srcElement
        var form = document.output
        if (evt.modifiers) {
            form.modifier[0].checked = evt.modifiers & Event.ALT_MASK
            form.modifier[1].checked = evt.modifiers & Event.CONTROL_MASK
            form.modifier[2].checked = evt.modifiers & Event.SHIFT_MASK
            form.modifier[3].checked = evt.modifiers & Event.META_MASK
        } else {
            form.modifier[0].checked = evt.altKey
            form.modifier[1].checked = evt.ctrlKey
            form.modifier[2].checked = evt.shiftKey
            form.modifier[3].checked = false
        }
    }
    return false
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Event Modifiers</H1>
<HR>
<P>Hold one or more modifier keys and click on 
<A HREF="javascript:void(0)" onMouseDown="return checkMods(event)">
this link</A> to see which keys you are holding.</P>
<FORM NAME="output">
<P>Enter some text with uppercase and lowercase letters:
<INPUT TYPE="text" SIZE=40 onKeyUp="checkMods(event)"></P>
<P><INPUT TYPE="button" VALUE="Click Here With Modifier Keys" onClick="checkMods(event)"></P>
<P>
<INPUT TYPE="checkbox" NAME="modifier">Alt
<INPUT TYPE="checkbox" NAME="modifier">Control
<INPUT TYPE="checkbox" NAME="modifier">Shift
<INPUT TYPE="checkbox" NAME="modifier">Meta
</P>
</FORM>
</BODY>
</HTML>

"ctrlKey" Example

 
    
<html>
<body>
<input type="button" 
       value="Click this button while pressing either Ctrl key" 
       onClick="alert(event.ctrlKey);"> 
</body>
</html>

"ctrlLeft" Example

 
    
<html>
<body>
<input type="button" value="Click this button while pressing the left Ctrl key" 
onClick="alert(event.ctrlLeft);"> 
</body>
</html>

Displaying charCode and keyCode Property Values

 
<HTML>
<HEAD>
<TITLE>charCode and keyCode Properties</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function showCode(which, evt) {
    document.forms[0].elements[which + "Char"].value = evt.charCode
    document.forms[0].elements[which + "Key"].value = evt.keyCode
}
function clearEm() {
    for (var i = 1; i < document.forms[0].elements.length; i++) {
        document.forms[0].elements[i].value = ""    
    }
}
</SCRIPT>
</HEAD>
<BODY>
<H1>charCode and keyCode Properties</H1>
<FORM>
<P>
<TEXTAREA NAME="scratchpad" COLS="40" ROWS="5" WRAP="hard"
onKeyDown="clearEm(); showCode("down", event)" onKeyUp="showCode("up", event)"
onKeyPress="showCode("press", event)"></TEXTAREA>
</P>
<TABLE CELLPADDING="5">
<TR><TH>Event</TH><TH>event.charCode</TH><TH>event.keyCode</TH></TR>
<TR><TD>onKeyDown:</TD><TD><INPUT TYPE="text" NAME="downChar" SIZE="3"></TD>
<TD><INPUT TYPE="text" NAME="downKey" SIZE="3"></TD></TR>
<TR><TD>onKeyPress:</TD><TD><INPUT TYPE="text" NAME="pressChar" SIZE="3"></TD>
<TD><INPUT TYPE="text" NAME="pressKey" SIZE="3"></TD></TR>
<TR><TD>onKeyUp:</TD><TD><INPUT TYPE="text" NAME="upChar" SIZE="3"></TD>
<TD><INPUT TYPE="text" NAME="upKey" SIZE="3"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Displaying keyCode Property Values

 
<HTML>
<HEAD>
<TITLE>keyCode Property</TITLE>
<STYLE TYPE="text/css">
TD {text-align:center}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function showCode(which) {
    document.forms[0].elements[which].value = event.keyCode
}
function clearEm() {
    for (var i = 1; i < document.forms[0].elements.length; i++) {
        document.forms[0].elements[i].value = ""    
    }
}
</SCRIPT>
</HEAD>
<BODY>
<H1>keyCode Property</H1>
<HR>
<P></P>
<FORM>
<P>
<TEXTAREA NAME="scratchpad" COLS="40" ROWS="5" WRAP="hard"
onKeyDown="clearEm(); 
showCode("down")" 
onKeyUp="showCode("up")"
onKeyPress="showCode("press")"></TEXTAREA>
</P>
<TABLE CELLPADDING="5">
<TR><TH>Event</TH><TH>event.keyCode</TH></TR>
<TR><TD>onKeyDown:</TD><TD><INPUT TYPE="text" NAME="down" SIZE="3"></TD></TR>
<TR><TD>onKeyPress:</TD><TD><INPUT TYPE="text" NAME="press" SIZE="3"></TD></TR>
<TR><TD>onKeyUp:</TD><TD><INPUT TYPE="text" NAME="up" SIZE="3"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Get key code in key down event (IE)

 
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
function press()
{
    var char;
    char = String.fromCharCode(event.keyCode);
    window.status = "You pressed " + char;
}
</script>
</head>
<body onkeydown="press()">
</body>
</html>

Handle arrow key, control, alt

 
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O"Reilly & Associates
     Copyright 2003 Danny Goodman
-->
function handleArrowKeys(evt) {
    evt = (evt) ? evt : ((window.event) ? event : null);
    if (evt) {
        var top = getElementStyle("moveableElem", "top", "top");
        var left = getElementStyle("moveableElem", "left", "left");
        var elem = document.getElementById("moveableElem");
        switch (evt.keyCode) {
            case 37:
                elem.style.left = (parseInt(left) - 5) + "px";
                break;    
            case 38:
                elem.style.top = (parseInt(top) - 5) + "px";
                break;    
            case 39:
                elem.style.left = (parseInt(left) + 5) + "px";
                break;    
            case 40:
                elem.style.top = (parseInt(top) + 5) + "px";
                break;    
         }
    }
}
document.onkeyup = handleArrowKeys;
----------
function handleAccelerator(evt) {
    evt = (evt) ? evt : ((window.event) ? event : null);
    if (evt) {
        if (evt.keyCode == 80 && evt.ctrlKey && evt.altKey) {
            runSpecial();
        }
    }
}
document.onkeyup = handleAccelerator;
----------
function showHelp(elem) {
    var elemID = elem.id;
    switch (elemID) {
        case "name":
            alert("Enter your full name.");
            break;
        case "email":
            alert("We will be contacting you with your access code. \n" +
                   "Make sure the address is accurate and up to date.");
            break;
        ...
    }
}
function handleAccelerator(evt) {
    evt = (evt) ? evt : ((window.event) ? event : null);
    var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
    if (evt) {
        // for Ctrl+Alt+F2
        if (evt.keyCode == 113 && evt.ctrlKey && evt.altKey) {
            showHelp(elem);
        }
    }
}
document.onkeyup = handleAccelerator;

Key and Character Codes vs. Event Types

 
 <!-- ***********************************************************
Example 6-1
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O"Reilly & Associates  ISBN 0-596-00316-1
http://www.oreilly.ru
Copyright 2002 Danny Goodman.  All Rights Reserved.
************************************************************ -->
<html>
<head>
<title>Keyboard Events and Codes</title>
<style type="text/css">
body {font-family:Arial, sans-serif}
h1 {text-align:right}
td {text-align:center}
</style>
<script language="JavaScript" type="text/javascript">
// array of table cell ids
var tCells = ["downKey", "pressKey", "upKey", "downChar", "pressChar", "upChar", "keyTarget", "character"];
// clear table cells for each key down event
function clearCells() {
    for (var i = 0; i < tCells.length; i++) {
      document.getElementById(tCells[i]).innerHTML = "&mdash;";
    }
}
// display target node"s node name
function showTarget(evt) {
    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
    if (node) {
        document.getElementById("keyTarget").innerHTML = node.nodeName;
    }
}
// decipher key down codes
function showDown(evt) {
    clearCells();
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) {
        document.getElementById("downKey").innerHTML = evt.keyCode;
        if (evt.charCode) {
            document.getElementById("downChar").innerHTML = evt.charCode;
        }
        showTarget(evt);
    }
}
// decipher key press codes
function showPress(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) {
        document.getElementById("pressKey").innerHTML = evt.keyCode;
        if (evt.charCode) {
            document.getElementById("pressChar").innerHTML = evt.charCode;
        }
        showTarget(evt);
        var charCode = (evt.charCode) ? evt.charCode : evt.keyCode;
        // use String method to convert back to character
        document.getElementById("character").innerHTML = String.fromCharCode(charCode);
    }
}
// decipher key up codes
function showUp(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) {
        document.getElementById("upKey").innerHTML = evt.keyCode;
        if (evt.charCode) {
            document.getElementById("upChar").innerHTML = evt.charCode;
        }
        showTarget(evt);
    }
}
// set page-wide event listeners
document.onkeydown = showDown;
document.onkeypress = showPress;
document.onkeyup = showUp;
</script>
</head>
<body>
<h1>Key and Character Codes vs. Event Types</h1> 
<hr>
<p>Enter some text with uppercase and lowercase letters:<br>
<form>
<input type="text" id="entry" size="60" 
       onkeydown="showDown(event)" 
       onkeypress="showPress(event)" 
       onkeyup="showUp(event)">
</textarea></p>
</form>
<table border="2" cellpadding="5" cellspacing="5">
<caption>Keyboard Event Properties</caption>
<tr><th>Data</th><th>keydown</th><th>keypress</th><th>keyup</th></tr>
<tr><td>keyCode</td>
    <td id="downKey">&mdash;</td>
    <td id="pressKey">&mdash;</td>
    <td id="upKey">&mdash;</td>
</tr>
<tr><td>charCode</td>
    <td id="downChar">&mdash;</td>
    <td id="pressChar">&mdash;</td>
    <td id="upChar">&mdash;</td>
</tr>
<tr><td>Target</td>
    <td id="keyTarget" colspan="3">&mdash;</td>
</tr>
<tr><td>Character</td>
    <td id="character" colspan="3">&mdash;</td>
</tr>
</table>
</body>
</html>

Keyboard Event Handler Laboratory

 
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>Keyboard Event Handler Lab</TITLE>
<STYLE TYPE="text/css">
TD {text-align:center}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function init() {
    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")
    restoreModifiers("Up")
    document.getElementById("downKeyCode").innerHTML = evt.keyCode
    if (evt.charCode) {
        document.getElementById("downCharCode").innerHTML = evt.charCode
    }
    showModifiers("Down", evt)
}
function showKeyUp(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 (evt.shiftKey) {
        document.getElementById("shift" + ext).style.backgroundColor = "#ff0000"
    }
    if (evt.ctrlKey) {
        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).style.backgroundColor = "#ffffff"
    document.getElementById("alt" + ext).style.backgroundColor = "#ffffff"
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Keyboard Event Handler Lab</H1>
<HR>
<FORM>
<TABLE BORDER=2 CELLPADDING=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><TH>Char Codes (IE5/Mac; NN6)</TH>
    <TD ID="downCharCode">0</TD>
    <TD ID="pressCharCode">0</TD>
    <TD ID="upCharCode">0</TD>
</TR>
<TR><TH ROWSPAN=3>Modifier Keys</TH>
    <TD><SPAN ID="shiftDown">Shift</SPAN></TD>
    <TD><SPAN ID="shift">Shift</SPAN></TD>
    <TD><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>
</BODY>
</HTML>

"keyCode" Example

 
    
<html>
<body>
<script language="JavaScript">
    function function1() {
        x = event.keyCode; alert("Unicode Value: "+x);
    }
    function function2() {
        x = event.keyCode; alert("Keyboard Value: "+x);
    }
</script>
<p>Press Any Key</p>
<body onKeyDown="function2();" onKeyPress="function1();">
</body>
</html>

Press F1 to trigger the help event

 
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
function yourhelp()
{
    alert("Help!");
    event.returnValue = false;
}
</script>
</head>
<body onHelp="yourhelp()">
</body>
</html>

"shiftKey" Example

 
    
<html>
<body>
<script language="JavaScript">
function function1() {
    var x = event.shiftKey; 
    if (x == false) {
        y = "not pressed."
    } else {
        y = "pressed."
    }
    alert("The status of the Shift key is "+y);
    var y = event.shiftLeft;
    if (y == false) {
       y = "not pressed."; 
    } else {
       y = "pressed.";
    }
    alert("The status of the left Shift key is "+y); 
} 
</script>
<a id="myL" 
    title="The wbex.ru home page" 
    href="http://www.wbex.ru/" 
    target=_blank
    onmouseover="function1()">
    unveil the status of the Shift key
</a>
</body>
</html>

Shift key pressed?

 
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event){
    if (event.shiftKey==1){
        alert("The shift key was pressed!")
    }else{
        alert("The shift key was NOT pressed!")
    }
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>Click in the document.</p>
</body>
</html>

"shiftLeft" Example

 
    
<html>
<body>
<script language="JavaScript">
function function1() {
    var x = event.shiftKey; 
    if (x == false) {
        y = "not pressed."
    } else {
        y = "pressed."
    }
    alert("The status of the Shift key is "+y);
    var y = event.shiftLeft;
    if (y == false) {
       y = "not pressed."; 
    } else {
       y = "pressed.";
    }
    alert("The status of the left Shift key is "+y); 
} 
</script>
<a id="myLink" 
    title="The wbex.ru home page" 
    href="http://www.wbex.ru/" 
    target=_blank
    onmouseover="function1()">
    unveil the status of the Shift key
</a>
</body>
</html>

Unicode of the key pressed

 
<html>
<head>
<script type="text/javascript">
function whichButton(event){
    alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p>Press a key on your keyboard. </p>
</body>
</html>

JavaScript DHTML/Event/Key Event

Содержание

Catches and manages the keyboard"s events

Checking Events for Key and Mouse Button Pressed

Checking Events for Modifier Keys

"ctrlKey" Example

"ctrlLeft" Example

Displaying charCode and keyCode Property Values

Displaying keyCode Property Values

Get key code in key down event (IE)

Handle arrow key, control, alt

Key and Character Codes vs. Event Types

Keyboard Event Handler Laboratory

"keyCode" Example

Press F1 to trigger the help event

"shiftKey" Example

Shift key pressed?

"shiftLeft" Example

Unicode of the key pressed

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты