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.
The <canvas>
element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
I love almost every part of being a tech blogger: learning, preaching, bantering, researching. The one part about blogging that I absolutely loathe: dealing with SPAM comments. For the past two years, my blog has registered 8,000+ SPAM comments per day. PER DAY. Bloating my database...
When I first wrote MooTools ElementFilter, I didn't think much of it. Fast forward eight months later and I've realized I've used the plugin a billion times. Hell, even one of the "big 3" search engines is using it for their maps application.
A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There's another common shape...
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..