sandbox/event/key.html

	key.html revision 772f655fcf57e58b97fa46b6a8d3fc772b83f743
1N/A<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1N/A<html>
1N/A<head>
1N/A<title>key</title>
1N/A<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0b1/build/cssfonts/fonts-min.css" />
1N/A<style>.detail { font-size: 0.8em }</style>
1N/A<script src="/build/yui/yui-debug.js" type="text/javascript"></script>
1N/A</head>
1N/A<body>
1N/A
1N/A<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>
1N/A
1N/A<form id="form1" name="form1">
1N/A    <input id="text1" type="text" value="Type!" class="nothing" />
1N/A</form>
1N/A
1N/A<script type="text/javascript">
1N/A
1N/AYUI({
1N/A    filter: 'debug'
1N/A}).use('event-key', 'event-delegate', function(Y) {
1N/A
1N/A    ////////////////////////////////////////////////////////////////////
1N/A
1N/A    var textNode = Y.one('#text1');
1N/A
1N/A    Y.on('focus', function(e) {
1N/A        this.set('value', '');
1N/A    }, textNode);
1N/A
1N/A    Y.on('focus', function(e) {
1N/A        Y.log('Yay, focus bubbles');
1N/A    }, '#form1');
1N/A
1N/A    Y.on('blur', function(e) {
1N/A        this.set('value', 'Type!!!');
1N/A    }, textNode);

    ////////////////////////////////////////////////////////////////////

    Y.on('keydown', function(e) {
        Y.log('keydown: ' + e.charCode + ', ' + e.which);
        Y.log('shift: ' + e.shiftKey);
    }, '#text1');


    Y.on('keyup', function(e) {
        Y.log('keyup: ' + e.charCode + ', ' + e.which);
    }, '#text1');

    Y.on('keypress', function(e) {
        Y.log('keypress: ' + e.charCode + ', ' + e.which);
    }, '#text1');

    ////////////////////////////////////////////////////////////////////

    var handler = function(e, arg1, arg2) {
        Y.log('My keylistener fired! ' + e.type + ": " + e.charCode + ' -- ' + arg1 + ', ' + arg2 + ', ' + e.which);
        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>