Implement setFocus() on Elements with MooTools
Every DOM node provides a focus method but most nodes have a tabIndex
of -1 which prevents the element from being focused on when clicked, tabbed, focused via JavaScript. I've been tinkering around with ways to make focusing on any element effortless with varying results. I tried monkey-patching the prototype which worked well in Safari and Chrome but nowhere else. I tried doing a tabIndex
check but IE complained. In the end I came up with more of a shortcut method than anything else.
The MooTools JavaScript
This method can be used by any node but it could cause issues with resetting an explicitly set tabIndex
.
Element.implement({
setFocus: function(index) {
this.setAttribute('tabIndex',index || 0);
this.focus();
}
});
Using this method is simple:
$('myDiv').setFocus();
There you have it. Depending on the node, the element may have a dotted outline as you would expect. Otherwise you can add onFocus and onBlur events to your DIVs, SPANs, and other nodes.
![9 Mind-Blowing WebGL Demos]()
As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available...
![Convert XML to JSON with JavaScript]()
If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium. The experience has been great: using JavaScript to create easy to write, easy to test, native mobile apps has been fun. My...
![MooTools Documentation Search Favelet]()
I'm going to share something with you that will blow your mind: I don't have the MooTools documentation memorized. I just don't. I visit the MooTools docs frequently to figure out the order of parameters of More classes and how best to use...
![Sliding Labels Using MooTools]()
A week back I saw a great effect created by CSSKarma: input labels being animated horizontally. The idea is everything positive: elegant, practical, unobtrusive, and requires very little jQuery code. Luckily the effect doesn't require much MooTools code either!
The HTML
A...
Simple, yet effective, I like it!
Very cool! I was just asking myself how elements are focused in JS while working on my ARAI Class.
I think this should be part of more. It’s simple and can be very useful for many scenarios.
What does this part means?
...abIndex',index || 0);
What is the “index” there means?
The desired tabIndex value.
Hi every body, nice technic but in my case Firefox send back :
ReferenceError: setFocus is not defined
while in chrome work fine!
https://gist.github.com/irwinv/5520695
Thanks worked for me..