Enter As TAB //JavaScript Repository

Description

Tabulation through the enter key.
Created: 2005.08.08 - Modified 2013.09.17

Dependencies

General » Manipulador de Eventos

Code (Download)

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/forms/enter-as-tab [rev. #3]

enterAsTab = function(f, a){
    addEvent(f, "keypress", function(e){
        var l, i, f, j, o = e.target;
        if(e.key == 13 && (a || !/textarea|select/i.test(o.type))){
            for(i = l = (f = o.form.elements).length; f[--i] != o;);
            for(j = i; (j = (j + 1) % l) != i && (!f[j].type || f[j].disabled || f[j].readOnly || f[j].type.toLowerCase() == "hidden"););
            e.preventDefault(), j != i && f[j].focus();
        }
    });
};

Example (Example)

<form action="" id="form">
    <fieldset>
    <legend>Tabula??o via enter</legend>
    <label>input text</label><input type="text" />
    <label>input text</label><input type="text" />
    <label>input text</label><input disabled="disabled" type="text" />
    <label>input radio</label><input type="radio" name="aaa" /> op??o 1
    <input type="radio" name="aaa" checked="checked" /> op??o 2
    <label>textarea</label><textarea rows="3" cols="15">aaaaaa pode dar enter q ele naum pula hahah</textarea>
    <label>textarea</label><select><option>op??o blablablabla</option><option>op??o bleblebleble</option></select>
    <label>input text</label><input type="text" />
    </fieldset>
</form>

<script type="text/javascript">
//<![CDATA[

enterAsTab(document.forms.form);

//]]>
</script>

Help

enterAsTab(form: HTMLFormElement, [jumpAlways: Boolean = false]): void

The function will add the tabulation through the enter key for all the inputs, except <select>'s (enter is used to select an option) and <textarea>'s (enter is used to break lines). When the last element is reached the default behaviour is to get back to the first element.

form: formulary that will receive the tabulation via enter
jumpAlways: if true, the enter will jump even selects and textareas