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

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    Generate Dojo GFX Drawings from SVG Files

    One of the most awesome parts of the Dojo / Dijit / DojoX family is the amazing GFX library.  GFX lives within the dojox.gfx namespace and provides the foundation of Dojo's charting, drawing, and sketch libraries.  GFX allows you to create vector graphics (SVG, VML...

  • By
    Select Dropdowns, MooTools, and CSS Print

    I know I've harped on this over and over again but it's important to enhance pages for print. You can do some things using simple CSS but today's post features MooTools and jQuery. We'll be taking the options of a SELECT element and generating...

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!