Implement setFocus() on Elements with MooTools

By  on  

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.

Recent Features

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • By
    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...

Incredible Demos

  • By
    Sexy Album Art with MooTools or jQuery

    The way that album information displays is usually insanely boring. Music is supposed to be fun and moving, right? Luckily MooTools and jQuery allow us to communicate that creativity on the web. The XHTML A few structure DIVs and the album information. The CSS The CSS...

  • By
    Duplicate DeSandro’s CSS Effect

    I recently stumbled upon David DeSandro's website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate:  use some simple JavaScript goodness to inject unicorns into their page.

Discussion

  1. Eric C.

    Simple, yet effective, I like it!

  2. 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.

  3. What does this part means?

    ...abIndex',index || 0);

    What is the “index” there means?

  4. Erenss

    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

  5. Thanks worked for me..

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!