Catches and manages the keyboard's events : Key Listener « Ajax Layer






<!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>
Catches and manages the keyboard's events : Key Listener « Ajax Layer « JavaScript DHTML
