Automatic Tabulation //JavaScript Repository

Description

Automatic tabulation for inputs with setted maxlenght.
Created: 2005.08.08 - Modified 2013.09.17

Dependencies

General » Manipulador de Eventos

Code (Download)

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/forms/auto-tab [rev. #4]

autoTab = function(f){
    var c = 0;
    addEvent(f, "keyup", function(e){
        var i, j, f = (e = e.target).form.elements, l = e.value.length, m = e.maxLength;
        if(c && m > -1 && l >= m){
            for(i = l = f.length; f[--i] != e;);
            for(j = i; (j = (j + 1) % l) != i && (!f[j].type || f[j].disabled || f[j].readOnly || f[j].type.toLowerCase() == "hidden"););
            j != i && f[j].focus();
        }
    });
    addEvent(f, "keypress", function(e){c = e.key;});
};

Example (Example)

<form action="" id="form">
    <fieldset>
    <legend>Tabula??o autom?tica</legend>
    <label>maxlenght = 1</label><input type="text" maxlength="1" />
    <label>maxlenght = 2</label><input type="text" maxlength="2" />
    <label>maxlenght = n?o setado</label><input type="text" />
    <label>maxlenght = 3</label><input type="text" maxlength="3" />
    <label>disabled</label><input type="text" maxlength="4" disabled="disabled" />
    <label>select simples</label><select><option>op??o blablablabla</option>
        <option>op??o bleblebleble</option></select>
    <label>maxlenght = 6</label><input type="text" maxlength="6" />
    </fieldset>
</form>

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

autoTab(document.forms.form);

//]]>
</script>

Help

autoTab(form: HTMLFormElement): void

The function will add the automatic tabulation for all the inputs that have the maxlenght attribute setted.

form: formulary that will receive the automatic tabulation