Tuesday, March 3rd, 2009
QFocuser
Category: Accessibility, JavaScript
, Library
It features:
- allow to your widget to listen key events when its focused
- focus can be enabled on any element
- fires focus and blur events (so your table row will NOT remain highlighted after click out of table for example)
- make your widget to be accessible by tab key
- tiny and library agnostic
- Works also in Safari!
You can give it a test drive.
As far as usage, you can do things as easily as this:
JAVASCRIPT:
-
-
var focuser = new QFocuser(widgetContainer, {
-
onFocus: function(focusedEl) { .. add highlighted class or whatever }
-
onBlur: function(focusedEl) { .. remove highlighted class or whatever }
-
});
-
-
// attach your own keys listeners
-
$(focuser.getKeyListener()).addEvent('keydown', e.g. handleArrows);
-
-
// when your widget decided to set the focus (and then receive key events)
-
focuser.focus(tableRowForExample);
-
4.1 rating from 25 votes
It would be nice if it would block default action for arrow keys while focused on widget, so that I won’t scroll whole window, while changing rows.
This is nice! Imagine moving through your Gmail inbox with arrow keys instead of j/k keys!
@paziek … my window doesn’t scroll when I change rows with the arrow keys.
@igitur
You’ve just imagined Opera’s Shift+arrow… But this script seems to break it, for compatibility you should disable it when Shift is pressed.
@igitur – why would you want to move your hands/fingers away from the home row?
Good work Daniel, keyboard accessibility is important in most application.
I would just change the terms “focus/blur” to “activation/deactivation”, the terms “focus/blur” are reserved for elements having a cursor IMHO (CSS has in fact an “:active” pseudo for non form elements), sure that will impact on the name you picked.