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">
    <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>
JsLib13.zip( 311 k)
Related examples in the same category

1.	Capturing Hotkeys
2.	Layer key event Demo
3.	KeyListener Example
Catches and manages the keyboard's events : Key Listener « Ajax Layer « JavaScript DHTML

Related examples in the same category
