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.
![5 HTML5 APIs You Didn’t Know Existed]()
When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It." Can you blame us though? We watched the fundamental APIs stagnate for so long that a basic feature...
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener
and attachEvent
. Times have changed but there are still a few functions each developer should...
![Resize an Image Using Canvas, Drag and Drop and the File API]()
Recently I was asked to create a user interface that allows someone to upload an image
to a server (among other things) so that it could be used in the various web sites my
company provides to its clients. Normally this would be an easy task—create a...
![Creating Spacers with Flexbox]()
I was one of the biggest fans of flexbox before it hit but, due to being shuffled around at Mozilla, I never had the chance to use it in any practice project; thus, flexbox still seems like a bit of a mystery to me. This greatly...
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..