KeyListener Example : Key Listener : Ajax Layer JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Ajax Layer » Key Listener »

 

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(sto 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 12to 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+(456, or 7to 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>


           
       

Download : Download nav_yui.zip nav_yui.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Ajax Layer
» Key Listener