jQuery: set focus on all elements

by gabrieleromanato

HTML

<p id="test">Ultrices turpis ac montes habitasse odio lundium et, amet et magna sit habitasse dis, cursus dolor sed, augue vel rhoncus pid adipiscing? Vut aliquet nisi ac nisi mus pid scelerisque, scelerisque ultrices ut adipiscing nisi. Ut, ultrices risus pid. Ultrices elementum dolor penatibus porta, lacus dictumst amet natoque? Augue proin, placerat ridiculus habitasse augue, ut.</p>

CSS

body {
    margin: 2em auto;
    width: 70%;
    line-height: 1.4;
}

.focus {
    background: #ff0;
    padding: 0.5em;
    border: thick solid orange;
}

:focus {
    outline-style: none;
}

JavaScript

$('#test').attr('tabindex', '-1');

$('#test').bind('focus', function() {
    $(this).addClass('focus');
});

$('#test').bind('blur', function() {
    $(this).removeClass('focus');
});