JSFiddle - React, Tailwind, and code Playground

by joelpurra

HTML

<script src="http://joelpurra.github.com/plusastab/lib/emulatetab/src/emulatetab.joelpurra.js"></script>
<script src="http://joelpurra.github.com/plusastab/src/plusastab.joelpurra.js"></script>
<!-- Enable enter as tab as the default for all fields in this form -->
<h1>
    <a href="http://joelpurra.github.com/plusastab">PlusAsTab</a> enter key demo
</h1>
<p>
    Use enter in the fields to go forward. The 
</p>

<form data-plus-as-tab="true">
    <fieldset>
        <legend>Demo form fields</legend>
        <input type="text" value="Enter skips to the next field" autofocus="autofocus" />
        <!-- Exclude this textarea -->
        <textarea data-plus-as-tab="false">Enter works as usual to make new lines in the textarea</textarea>
        <input type="text" value="Enter skips to the next field" />
        <select><option>Enter skips here too</option></select>
        <!-- Exclude this submit button -->
        <button type="submit" data-plus-as-tab="false">Enter works as usual to submit on this button</button>
        <input type="text" value="You can tab to go here" />
    </fieldset>
</form>

CSS

textarea, input, select, button
{
    display: block;
    min-width: 15em;
}

textarea
{
    height: 4em;
}

h1
{
    font-weight: bold;
}

JavaScript

$(function() {
    JoelPurra.PlusAsTab.setOptions({
        // Use enter instead of plus
        // Number 13 found through demo at
        // http://api.jquery.com/event.which/
        key: 13
    });
});