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
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    dwImageProtector Plugin for jQuery

    I've always been curious about the jQuery JavaScript library. jQuery has captured the hearts of web designers and developers everywhere and I've always wondered why. I've been told it's easy, which is probably why designers were so quick to adopt it NOT that designers...

  • By
    Introducing MooTools NextPrev

    One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item.

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!