Luke Smith
YUI Developer
Last CDN Push: 03/2/10
Build Tag: gallery-2010.03.02-18
Project: YUI 3
License: YUI BSD
YUI Version: 3.0.0
Free for use.
Using the synthetic event API new in 3.1, creates custom DOM events for subscribing to keydown that reports a specific keyCode in the event. The end result is something like node.on('enter', function (e) { MyApp.sendData(); e.preventDefault(); });
Arrow key events are presented in two ways, as individual events "up", "down", "left", and "right", as well as a generic "arrow" event. The latter event reports the direction ("up", "down", etc) on the event object in the 'direction' property. So node.on('arrow', function (e) { if (e.direction === "up") { ... } });
These events are mainly to simplify adding keyboard navigation support for accessibility and for rapid prototyping. They also (hopefully) have the effect of making the code a bit more human readable.
The supporting version is marked as 3.0, but it requires the new event-synthetic API in 3.1 (or on development head from github prior to the release).
Increase or decrease a number in an input using the arrow keys. Bump the value up or down by increments of 10 using the pageUp and down and set it to 0 by hitting escape.
Code Sample
<script src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"></script>YUI({
//Last Gallery Build of this module
gallery: 'gallery-2010.03.02-18'
}).use('gallery-event-nav-keys', function(Y) {
Y.one( "#some-input" ).on( {
up : function () { this.set( "value", this.get( "value" ) + 1 ); },
down : function () { this.set( "value", this.get( "value" ) - 1 ); },
pageUp : function () { this.set( "value", this.get( "value" ) + 10 ); },
pageDown: function () { this.set( "value", this.get( "value" ) - 10 ); },
esc : function () { this.set( "value", "0" ); }
} );
});Forum Posts
No forum posts for this module.
YUI Projects
Contribute
© 2010 YUI Library - Site Credits