Keeping Track of Focus
One annoying limitation of Javascript is that there is no easy way to track which element currently has focus. In general, we don't really need this information; however, I've recently run across a case where it would be a good idea to be able to know which element currently has focus. Here's a little prototype based Javascript that provides a simple way to track focus throughout your document using event delegation:
var FocusReader = Class.create({ initialize: function(){ this.currentFocus = null; var focusRead = this.focusRead.bindAsEventListener(this); document.observe("focus", focusRead); }, focusRead: function(e){ this.currentFocus = e.element(); }, getCurrentFocus: function(){ return this.currentFocus; }, getCurrentFocusId: function(){ if(this.currentFocus.identify) return this.currentFocus.identify(); } });
Notice how we've used event delegation to ensure that we can see the focus anywhere in the document without having to add an event handler to every element that may receive focus. We've also provided two ways to represent the focused element--a pointer to the element itself as well as its ID.
Download: focusReader.js (1kb)
I am a User Interface Engineer working for AutoTrader.com in Atlanta, GA and I've been on this crazy ride called Web Development since 1997. Along the way, I'd like to think I've learned a bit and this is my forum to share it.
var FocusReader = Class.create({
/** cleaner code and easier to track class level vars */
currentFocus:null,
initialize: function(){
/** don’t init focus var for binding */
document.observe(”focus”, this.focusRead.bindAsEventListener(this));
},
focusRead: function(e){
this.currentFocus = e.element();
},
getCurrentFocus(){
return this.currentFocus;
},
getCurrentFocusId(){
/** consider invoking apply() or call() on the function rather then directly invoking it - picky but sometimes can be cleaner */
if(this.currentFocus.identify) return this.currentFocus.identify();
}
});
I snagged this code and tried to get an example up/running to watch it work.
I’m not sure what I’m doing wrong, but (and I hate to ask)…
does this actually work?
In Firefox 2.0.0.15, I’m getting a error at “getCurrentFocus()” saying it needs a colon because it’s not a function.
Good catch; I’ve corrected the code in the post above.
Do you have a working example? I still can’t get the snippet above to work.
Or perhaps this isn’t intended to work in Firefox or IE 6 (that’s where I’ve tested it).
I’d love to have the ability to detect what element has focus. Unfortunately, from what I’ve read elsewhere some events don’t bubble up to the document (ie. focus, blur), but click and mouse events do.
I’d love to see this work.
Feel free to send me e-mail if that is more convenient.