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>
yui.zip( 3,714 k)Related examples in the same category