What elements can receive focus

by steveukx

HTML

<p>Slide the range picker left to right to try setting focus to one of the elements below (in IE enter a number between one and <span id="max"></span>).</p>

<input type="range" min="1" max="3" value="1" step="1"/>
<hr />
a: <a class="focusable">Focus</a> <br />
a[href="#"]: <a class="focusable" href="#">Focus</a>
<ul>
    <li class="focusable">li: Focus</li>
    <li class="focusable" tabindex="10">li[tabindex]: Focus</li>
</ul>
button: <button class="focusable">Focus</button>

CSS

* { font: 10pt/1.5 "Lucida Sans Unicode", Helvetica, Sans-Serif; }
:focus { background: red; }

JavaScript

var focuses = document.querySelectorAll('.focusable');
var range = document.querySelector('[type=range]');
range.setAttribute('max', focuses.length);

range.addEventListener('change', function(e) {
    focuses[this.value - 1].focus();
}, true);

document.getElementById('max').innerHTML = focuses.length;