Different focuskeys

This example shows how to setup a focusmanager that navigates with different keys: arrow-up and arrow-down. You could as wel use a plugin, with an additional config-object that looks like: {keyup: 39, keydown: 41}.

By setting the focus to the container, the first element gets focussed automaticly.

Code-example:

<style type="text/css">
    .container {
        width: 300px;
        margin: 20px;
        border: solid 1px #000;
        padding: 10px;
        display: inline-block;
    }
    .container.focussed {
        border: solid 2px #F00;
        background-color: #F5F5F5;
    }
    .container input {
        display: block;
        margin: 4px 0;
    }
</style>

<body>
    <div class="container pure-form" plugin-fm="true" fm-keyup="38" fm-keydown="40">
        <input type="text" value="first"/>
        <input type="text" value="second"/>
        <input type="checkbox" />
        <button class="pure-button pure-button-bordered">Cancel</button>
        <button class="pure-button pure-button-bordered">OK</button>
    </div>
</body>

<script src="itsabuild-min.js"></script>
<script>
    document.getElement('.container').focus();
</script>

API Docs

Examples

Module-documentation

Different focuskeys