Enter As TAB //JavaScript Repository

Description

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

Dependencies

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.keyValue == 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

Rank (Votes: 158)

2.53