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.
![LightFace: Facebook Lightbox for MooTools]()
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
![Write Better JavaScript with Promises]()
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
![Custom Scrollbars in WebKit]()
Before each of the browser vendors we like was providing unique CSS controls, Internet Explorer was setting the tone. One such example is IE's early implementation of CSS filters. Internet Explorer was also the first browser that allowed developers to, for better or worse, customize...
![CSS Kwicks]()
One of the effects that made me excited about client side and JavaScript was the Kwicks effect. Take a list of items and react to them accordingly when hovered. Simple, sweet. The effect was originally created with JavaScript but come five years later, our...
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..