JavaScript DHTML/Ajax Layer/Key Listener

Содержание

1 Capturing Hotkeys
2 Catches and manages the keyboard"s events
3 KeyListener Example
4 Layer key event Demo

Capturing Hotkeys

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<br>
Press atl+x to change the document background color
<p>Note: NS4 does not support the "alt" key nor the combination of more than one keys (e.g. ctrl+z)</p>
</body>
</html>

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

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>

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

KeyListener Example

<!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>
  <div class="box">
    <div class="hd">
      <h1>KeyListener Example</h1>
    </div>
    <div class="bd">
    <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>
    </div>
    <div id="debug">
    </div>
  </div>
</body>
</html>

Layer key event Demo

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">
<!--
  var x=10,y=80;
  myLayer = new DynLayer()
  myLayer.setSize(400,80)
  myLayer.setBgColor("#c0c0c0")
  myLayer.setLocation(10,80)
  myLayer.setHTML("Press any alphabetic keys to see it"s keycode. <br>\n Press \"CTRL\" to move me.<br>And try and find the secret key ;).")

  myListener = {
    onkeyup : function(e) {
      if (e.charKey=="s") alert("You\"ve found the secret key")
      if ((e.charKey>="a")&&(e.charKey<="z")) alert("You pressed the key  \""+e.charKey+"\".")
    },
    onkeydown : function(e) {
      if (e.which==39) { x+=20;myLayer.setLocation(x,y);return true }
      if (e.which==37) { x-=20;myLayer.setLocation(x,y);return true }
      if (e.which==40) { y+=20;myLayer.setLocation(x,y);return true }
      if (e.which==38) { y-=20;myLayer.setLocation(x,y);return true }
      if (e.ctrlKey) { x+=20;y+=20;myLayer.setLocation(x,y);return true }
      if (e.shiftKey) alert("SHIFT!");
    }
  }
  dynapi.document.addEventListener(myListener);
  dynapi.document.addChild(myLayer);
//-->
</script>
</head>
<body bgcolor="#ffffff">
</body>
</html>

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

JavaScript DHTML/Ajax Layer/Key Listener

Содержание

Capturing Hotkeys

Catches and manages the keyboard"s events

KeyListener Example

Layer key event Demo

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты