JavaScript DHTML/Ajax Layer/Key Listener

Материал из Web эксперт
Перейти к: навигация, поиск

Capturing Hotkeys

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - Capturing Hotkeys</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript">

 dynapi.library.setPath("./dynapisrc/");
 dynapi.library.include("dynapi.library");
 dynapi.library.include("dynapi.api");
 dynapi.library.include("dynapi.api.ext.DynKeyEvent");
 dynapi.library.include("dynapi.functions.Color");

</script> <script language="Javascript">

 dynapi.document.captureHotKey("ctrl+z",fn);
 dynapi.document.captureHotKey("alt+x",fn1);
 dynapi.document.showScrollBars(true)
 function fn(){
   alert("Hello you"ve pressed Ctrl+Z")
 };
 function fn1(){
   dynapi.document.setBgColor(dynapi.functions.getRandomColor());
 };

</script> </head> <body> Press ctrl+z to display a message
Press atl+x to change the document background color

Note: NS4 does not support the "alt" key nor the combination of more than one keys (e.g. ctrl+z)

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Catches and manages the keyboard"s events

   <source lang="html4strict">

<!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()">

JsLib 1.3


Exemple - clavier.js

   <NOSCRIPT>

Erreur : votre navigateur ne reconnait pas le Javascript ou est configuré pour ne pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la configuration dans les préférences/options de votre navigateur.


   </NOSCRIPT>
   <FORM ACTION="GET" NAME="f1" onSubmit="return false">
     <P>Appuyez sur n"importe quelle touche du clavier...
<TEXTAREA NAME="ta1" ROWS=5 COLS=60></TEXTAREA>
           Type de l"événement : 
           <INPUT TYPE="radio" NAME="r1"> Touche enfoncée (keydown)
<INPUT TYPE="radio" NAME="r1"> Touche maintenue enfoncée (keypress)
<INPUT TYPE="radio" NAME="r1"> Touche relachée (keyup)

Code de la touche : <INPUT TYPE=TEXT NAME="t1" VALUE=""> <P>Caractère ou fonction correspondant : <INPUT TYPE=TEXT SIZE=30 NAME="t2" VALUE="">

Touches de raccourcis clavier :  <INPUT TYPE="checkbox" NAME="c1"> Ctrl
<INPUT TYPE="checkbox" NAME="c2"> Alt
  } Alt Gr
  <INPUT TYPE="checkbox" NAME="c3"> Shift  
     </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>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/JsLib13.zip">JsLib13.zip( 311 k)</a>


KeyListener Example

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>YAHOO.util.KeyListener</title> <script type="text/javascript" src="./build/yahoo/yahoo.js" ></script> <script type="text/javascript" src="./build/event/event.js" ></script> <script type="text/javascript" src="./build/dom/dom.js" ></script> <link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" /> <link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" /> <script type="text/javascript" src="./build/container/container_core.js"></script> <style> </style> <script language="javascript">

 YAHOO.namespace("example.keylistener");
 function init() {
   var debug = document.getElementById("debug");
   document.documentElement.focus();
   document.body.focus();
   var handler = function(type, args, obj) {
     debug.appendChild(document.createTextNode("key press handled: " + args[0]));
     debug.appendChild(document.createElement("BR"));
   }
   YAHOO.example.keylistener.kpl1 = new YAHOO.util.KeyListener(document, { keys:[49,50,51] }, { fn:handler } );
   YAHOO.example.keylistener.kpl1.enable();
   YAHOO.example.keylistener.kpl2 = new YAHOO.util.KeyListener(document, { shift:true, alt:true, keys:[52,53,54,55] }, handler );
   YAHOO.example.keylistener.kpl2.enable();
 }
 YAHOO.util.Event.addListener(window, "load", init);

</script> </head> <body>

KeyListener Example

   <p>KeyListener takes three arguments: the element reference or id to attach the listener to, an object literal that contains the details about the key(s) to listen for, and the handler (represented either as a function, or a literal containing arguments for the handler function, the scope, and a scope correction flag).</p>
   <p>KeyListeners are enabled and disabled by calling the enable() and disable() functions on a listener. The DOM events for keys are dynamically attached and detached upon enable and disable. 
   </p>
   <p>Press 1, 2, 3 to trigger KeyListener1.<button onclick="YAHOO.example.keylistener.kpl1.disable()">disable kpl1</button><button onclick="YAHOO.example.keylistener.kpl1.enable()">enable kpl1</button></p>
   <p>Press Alt+Shift+(4, 5, 6, or 7) to trigger KeyListener2.<button onclick="YAHOO.example.keylistener.kpl2.disable()">disable kpl2</button><button onclick="YAHOO.example.keylistener.kpl2.enable()">enable kpl2</button></p>

</body> </html>


      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>


Layer key event Demo

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - Key Events</title> <script language="Javascript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("dynapi.api.ext.DynKeyEvent"); </script> <script language="Javascript">

</script> </head> <body bgcolor="#ffffff"> </body> </html>


      </source>
   
  
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>