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
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

Incredible Demos

  • By
    Fancy FAQs with jQuery Sliders

    Frequently asked questions can be super boring, right? They don't have to be! I've already shown you how to create fancy FAQs with MooTools -- here's how to create the same effect using jQuery. The HTML Simply a series of H3s and DIVs wrapper...

  • By
    FileReader API

    As broadband speed continues to get faster, the web continues to be more media-centric.  Sometimes that can be good (Netflix, other streaming services), sometimes that can be bad (wanting to read a news article but it has an accompanying useless video with it).  And every social service does...

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!