Catches and manages the keyboard's events : Key Event « Event « JavaScript DHTML

Home
JavaScript DHTML
1.Ajax Layer
2.Data Type
3.Date Time
4.Development
5.Document
6.Dojo toolkit
7.Event
8.Event onMethod
9.Ext JS
10.Form Control
11.GUI Components
12.HTML
13.Javascript Collections
14.Javascript Objects
15.Javascript Properties
16.jQuery
17.Language Basics
18.Mochkit
19.Mootools
20.Node Operation
21.Object Oriented
22.Page Components
23.Rico
24.Scriptaculous
25.Security
26.SmartClient
27.Style Layout
28.Table
29.Utilities
30.Window Browser
31.YUI Library
JavaScript DHTML » Event » Key Event 
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)>0cret=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)>0cret=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)==8return clavier_cds[ccod];
  if (parseInt(ccod)==9return clavier_cds[ccod];
  if (parseInt(ccod)==13return clavier_cds[ccod];
  if (parseInt(ccod)==27return clavier_cds[ccod];
  if (parseInt(ccod)==32return 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=COLS=60></TEXTAREA>

      <TABLE SUMMARY="table" BORDER=CELLSPACING=CELLPADDING=5><TR><TD>
        <TABLE SUMMARY="table" BORDER=CELLSPACING=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=CELLSPACING=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>


           
         
  
Related examples in the same category
1.'ctrlLeft' Example
2.'ctrlKey' Example
3.'shiftKey' Example
4.'shiftLeft' Example
5.'keyCode' Example
6.Key and Character Codes vs. Event Types
7.Shift key pressed?
8.Unicode of the key pressed
9.Keyboard Event Handler Laboratory
10.Displaying keyCode Property Values
11.Displaying charCode and keyCode Property Values
12.Checking Events for Modifier Keys
13. Checking Events for Key and Mouse Button Pressed
14.Handle arrow key, control, alt
15.Get key code in key down event (IE)
16.Press F1 to trigger the help event
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.