Focussing DOM-nodes

All DOM-events are trully delegated. This means we can set up only one subscriber for all focus-events. Also notice how we prevent-default the submitbutton and focussed in instead, so we still get a focus-message on that button.

Focus the formelements and see what element got the focus.

Code-example:

<body>
    <div id="msg-container"></div>

    <form id="form-container" class="pure-form pure-form-aligned">
        <fieldset>
            <div class="pure-control-group">
                <label for="name">Username</label>
                <input id="name" type="text" placeholder="Username">
            </div>

            <div class="pure-control-group">
                <label for="password">Password</label>
                <input id="password" type="password" placeholder="Password">
            </div>

            <div class="pure-control-group">
                <label for="email">Email Address</label>
                <input id="email" type="email" placeholder="Email Address">
            </div>

            <div class="pure-controls">
                <label for="checkbox" class="pure-checkbox">
                    <input id="checkbox" type="checkbox"> I've read the terms and conditions
                </label>

                <button id="submit-button" type="submit" class="pure-button pure-button-primary">Submit</button>
            </div>
        </fieldset>
    </form>
</body>

<script src="itsabuild-min.js"></script>
<script>
    var blurContainer, focusContainer, showMsgBlur, showMsgFocus;

    blurContainer = document.getElementById('msg-blur');
    focusContainer = document.getElementById('msg-focus');

    showMsgBlur = function(e) {
        blurContainer.innerHTML = 'The element <b>'+ e.target.id + '</b> got blurred';
    };
    showMsgFocus = function(e) {
        focusContainer.innerHTML = 'The element <b>'+ e.target.id + '</b> got focussed';
    };

    ITSA.Event.after('blur', showMsgBlur, '#form-container input, #form-container button');
    ITSA.Event.after('focus', showMsgFocus, '#form-container input, #form-container button');

    ITSA.Event.before('tap', function(e) {
        e.preventDefault();
        e.target.focus();
    }, '#submit-button');
</script>

API Docs

Examples

Module-documentation

Focussing DOM-nodes