Test case for jQuery Ticket 7768

focus crossbrowser stuff

by jitter

HTML

<script src="http://getfirebug.com/firebug-lite-debug.js"></script>
 <div class="box">
    <h2>Works in all browsers:</h2>
    <p>
        <input class="test" value="Input:text - Click me" type="text" />
    </p>
    <textarea class="test">Textarea - Click me</textarea>
</div>
<div class="box">
    <h2>Works in IE, Firefox and Opera</h2>
    <h2>Use the TAB key in Chrome/Safari to give these elements focus</h2>
    <p>
        <input class="test" value="Input:button - Click me" type="button" />
    </p>
    <p>
        <button class="test">Button - Click me</button>
    </p>
    <p>
        <input id="radio" class="test" type="radio" /><label for="radio">Radio - Click me</label>
    </p>
    <p>
        <input id="chkbx" class="test" type="checkbox" /><label for="chkbx">Checkbox - Click me</label>
    </p>
    <a href="#" class="test">Link - Click me</a>
</div>
<div class="box">
    <h2>No browsers support</h2>
    <div class="test3">DIV - Click me</div>
    <p>
        <span class="test3">SPAN - Click me</span>
    </p>
    <p class="test3">P - Click me</p>
    <b class="test3">B - Click me</b>
    <ul class="test3">UL - Click me</ul>
    <ul>
        <li class="test3">LI - Click me</li>
    </ul>
</div>

CSS

.box {
    border: 1px solid black;
    margin: 10px;
}
p {
    margin: 5px;
}

JavaScript

//In recent browser versions, the event can be extended to include
 //all element types by explicitly setting the element's tabindex property
$('.test3').attr('tabIndex', -1);
 
$('.test,.test3').focus(function() {
    console.log(this.tagName + ':' + this.type + ' has focus!');
    return false;
});