fast/forms/focus2.html

<p>This test tabs between lots of elements, printing out the events you see along the way.</p>
<hr>
<div id="testDiv"></div>
<iframe id="testIframe" style="width: 800; height: 125; margin-top: 10px; border: 2px solid black"></iframe>
<pre id="console"></pre>

<script>

if (window.testRunner)
    testRunner.dumpAsText();

function log(s)
{
    document.getElementById('console').appendChild(document.createTextNode(s));
}

function description(element)
{
    var inputType = element.getAttribute('type');
    if (inputType)
        return inputType;
        
    if (element.toString().match(/iframe/i))
        return "IFRAME";
    
    if (element.toString().match(/javascript:/i))
        return "ANCHOR";

    if (element.toString().match(/textarea/i))
        return "TEXTAREA";

    if (element.toString().match(/div/i))
        return "DIV";

    return element.toString();
}

function keydownListener(event)
{
    log("keydown event: [to] " + description(event.target)  + "\n");
}

function blurListener(event)
{
    log("blur event: [to] " + description(event.target) + "\n");
}

var lastFocusedElement = null;
function focusListener(event)
{
    log('focus event: [to] ' + description(event.target) + '\n');
    lastFocusedElement = event.target;
}

function addEventListeners(element)
{
    element.addEventListener('keydown', keydownListener, false);
    element.addEventListener('focus', focusListener, false);
    element.addEventListener('blur', blurListener, false);
}

function addElements(parentElement)
{
    var inputTypes = [
        "BUTTON", 
        "CHECKBOX", 
        "FILE", 
        "HIDDEN", 
        "IMAGE", 
        "ISINDEX", 
        "PASSWORD", 
        "RADIO", 
        "RANGE", 
        "RESET", 
        "SEARCH", 
        "SUBMIT", 
        "TEXT"
    ];

    // Form elements
    for (var i = 0; i < inputTypes.length; ++i) { //>
        var input = parentElement.ownerDocument.createElement('input');
        input.type = inputTypes[i];
        addEventListeners(input);
        parentElement.appendChild(input);
    }
    
    // Textarea
    var textarea = parentElement.ownerDocument.createElement('textarea');
    addEventListeners(textarea);
    parentElement.appendChild(textarea);
    
    // Contenteditable
    var div = parentElement.ownerDocument.createElement('div');
    div.contentEditable = true;
    div.style.border = "1px solid black";
    addEventListeners(div);
    parentElement.appendChild(div);

    // Anchor
    var anchor = parentElement.ownerDocument.createElement('a');
    anchor.innerHTML = "anchor";
    anchor.href = "javascript:";
    addEventListeners(anchor);
    parentElement.appendChild(anchor);
}

function dispatchOptionTab(element, shiftKey)
{
    var event = document.createEvent("KeyboardEvents");
    var tabKeyIdentifier = "U+0009";
    event.initKeyboardEvent("keydown", true, true, document.defaultView, tabKeyIdentifier, 0, false, true, shiftKey, false, false);
    element.dispatchEvent(event);
}

function setup()
{
    var testDiv = document.getElementById('testDiv');
    addElements(testDiv);

    var testIframe = document.getElementById('testIframe');
    addElements(testIframe.contentDocument.body);
    addEventListeners(testIframe);
}

setup();

log('PARENT DOCUMENT:\n');
document.getElementsByTagName('input')[0].focus();
for (var i = 0; i < 14; ++i) //>
    dispatchOptionTab(lastFocusedElement, false);

lastFocusedElement.blur();

log('\nIFRAME DOCUMENT:\n');
document.getElementById('testIframe').contentDocument.getElementsByTagName('input')[0].focus();
for (var i = 0; i < 14; ++i) //>
    dispatchOptionTab(lastFocusedElement, false);
</script>