key.html revision 8fb4379e4ddb07410603dca5e10c9def33fe24ae
<html>
<head>
<title>YUI 3.0</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0b1/build/cssfonts/fonts-min.css" />
<style>.detail { font-size: 0.8em }</style>
<body>
<div resource="#event_key" rel="yui:event" class=""> <div class="detail"> <code> <strong property="yui:name">key</strong> ( type , fn , id , spec , o , args ) </code> <div property="yui:description" class="description"> Add a key listener. The listener will only be notified if the keystroke detected meets the supplied specification. The spec consists of the key event type, followed by a colon, followed by zero or more comma separated key codes, followed by zero or more modifiers delimited by a plus sign. Ex: press:12,65+shift+ctrl </div> <div class="description"> <dl rel="yui:parameters"> <dt>Parameters:</dt> <dd rel="yui:parameter"> <code><span property="yui:name">type</span> <<span property="yui:type">string</span>> </code> <span property="yui:description"> 'key'</span> </dd> <dd rel="yui:parameter"> <code><span property="yui:name">fn</span> <<span property="yui:type">string</span>> </code> <span property="yui:description"> the function to execute</span> </dd> <dd rel="yui:parameter"> <code><span property="yui:name">id</span> <<span property="yui:type">string</span>> </code> <span property="yui:description"> the element(s) to bind</span> </dd> <dd rel="yui:parameter"> <code><span property="yui:name">spec</span> <<span property="yui:type">string</span>> </code> <span property="yui:description"> the keyCode and modifier specification</span> </dd> <dd rel="yui:parameter"> <code><span property="yui:name">o</span> <<span property="yui:type">object</span>> </code> <span property="yui:description"> optional context object</span> </dd> <dd rel="yui:parameter"> <code><span property="yui:name">args</span> <<span property="yui:type">object</span>> </code> <span property="yui:description"> 0..n additional arguments that should be provided to the listener.</span> </dd> </dl> </div> </div> <hr/> </div>
<form id="form1" name="form1">
<input id="text1" type="text" value="Type!" class="nothing" />
</form>
<script type="text/javascript">
YUI().use('event-key', 'event-delegate', function(Y) {
////////////////////////////////////////////////////////////////////
var textNode = Y.one('#text1');
Y.on('focus', function(e) {
this.set('value', '');
}, textNode);
Y.on('focus', function(e) {
Y.log('Yay, focus bubbles');
}, '#form1');
Y.on('blur', function(e) {
this.set('value', 'Type!!!');
}, textNode);
////////////////////////////////////////////////////////////////////
Y.delegate('keydown', function(e) {
Y.log('keydown: ' + e.charCode);
Y.log('shift: ' + e.shiftKey);
}, '#form1');
Y.on('keyup', function(e) {
Y.log('keyup: ' + e.charCode);
}, '#text1');
Y.on('keypress', function(e) {
Y.log('keypress: ' + e.charCode);
}, '#text1');
////////////////////////////////////////////////////////////////////
var handler = function(e, arg1, arg2) {
Y.log(this);
e.halt();
// handle.detach();
};
// var handle = Y.on('key', handler, textNode, 'press:65', null, 1, 2);
var handle = Y.on('key', handler, textNode, null, null, 1, 2);
////////////////////////////////////////////////////////////////////
// }, '#text1', 'down:65', Y, 1, 2);
// }, '#text1', 'down:65,12,13', Y, 1, 2);
// }, '#text1', 'down:65,12,13+shift', Y, 1, 2);
// }, '#text1', 'press:65+ctrl+shift', Y, 1, 2);
// }, '#text1', 'down:shift', Y, 1, 2);
// }, '#text1', 'press:', Y, 1, 2);
// }, '#text1', 'press:65', window, 1, 2);
// }, '#text1', 'down:13');
// }, '#text1');
});
</script>
</body>
</html>