Input Mascarado //Repositório JavaScript

Descrição

Classe para mascarar inputs (não funciona corretamente no opera).
Criado: 2005.08.08 - Modificado 2013.09.17

Dependências

General » Manipulador de Eventos

Código (Download)

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/forms/masked-input [rev. #2]

MaskInput = function(f, m){
    function mask(e){
        var patterns = {"1": /[A-Z]/i, "2": /[0-9]/, "4": /[\xC0-\xFF]/i, "8": /./ },
            rules = { "a": 3, "A": 7, "9": 2, "C":5, "c": 1, "*": 8};
        function accept(c, rule){
            for(var i = 1, r = rules[rule] || 0; i <= r; i<<=1)
                if(r & i && patterns[i].test(c))
                    break;
                return i <= r || c == rule;
        }
        var k, mC, r, c = String.fromCharCode(k = e.key), l = f.value.length;
        (!k || k == 8 ? 1 : (r = /^(.)\^(.*)$/.exec(m)) && (r[0] = r[2].indexOf(c) + 1) + 1 ?
            r[1] == "O" ? r[0] : r[1] == "E" ? !r[0] : accept(c, r[1]) || r[0]
            : (l = (f.value += m.substr(l, (r = /[A|9|C|\*]/i.exec(m.substr(l))) ?
            r.index : l)).length) < m.length && accept(c, m.charAt(l))) || e.preventDefault();
    }
    for(var i in !/^(.)\^(.*)$/.test(m) && (f.maxLength = m.length), {keypress: 0, keyup: 1})
        addEvent(f, i, mask);
};

Exemplo (Exemplo)

<form action="">
    <fieldset>
    <legend>M?scara Gen?rica</legend>
    <label>telefone "(99)9999-9999"</label><input type="text" name="fone" />
    <label>data "99/99/9999"</label><input type="text" name="data" />
    <label>m?scara = letra + letra sem acento + 2 n?meros + tracinho + qualquer digito + letra "Cc99-*C"</label><input type="text" name="etc" />
    <label>permite qualquer coisa menos a, b ou c "E^abc"</label><input type="text" name="except" />
    <label>permite somente a, b ou c "O^abc"</label><input type="text" name="only" />
    <label>somente letras "C^"</label><input type="text" name="letra" />
    <label>somente letras e, tb espa?o em branco "C^ "</label><input type="text" name="letra2" />
    <label>somente n?meros e, as letras a, b e c "9^abc"</label><input type="text" name="numero" />
    </fieldset>
</form>

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

var f = document.forms[0];
MaskInput(f.fone, "(99)9999-9999");
MaskInput(f.data, "99/99/9999");
MaskInput(f.etc, "Cc99-*C");
MaskInput(f.except, "E^abc");
MaskInput(f.only, "O^abc");
MaskInput(f.letra, "C^");
MaskInput(f.letra2, "C^ ");
MaskInput(f.numero, "9^abc");

//]]>
</script>

Ajuda

MaskInput(field: HTMLInputElement, mask: String): void

Adiciona máscara a um campo.

field: campo que vai receber a máscara
mask: máscara que será aplicada

Regras Padrões

a = A-Z e 0-9
A = A-Z, acentos e 0-9
9 = 0-9
C = A-Z e acentos
c = A-Z
* = qualquer coisa

Regras Especiais

E = (Except) exceção
O = (Only) somente

Criação de Máscaras

Máscara simples: nesse tipo de máscara o usuário pode digitar no máximo a mesma quantidade de caracteres que a máscara contém.
Exemplo:
Telefone = (99)9999-9999
Data = 99/99/9999

Máscara especial "regra^exceções": esse tipo de máscara é composto por 2 partes, separadas por "^", o lado esquerdo especifica a regra e o direito as exceções para a regra selecionada.
Exemplo:
9^abc = a regra é aceitar somente números "9" e a exceção são os caracteres a, b e c
c^123 = aceita somente caracteres de a-z e a exceção são os números 1, 2 e 3

Uso das regras especiais: ela é semelhante a máscara especial, porém o lado esquerdo tem um significado diferente, podendo ser "E" (qualquer coisa, exceto...) ou "O" (somente...)
Exemplo:
E^abc: aceita qualquer coisa, menos a, b e c
O^123: só permite os caracteres 1, 2 e 3

JSFromHell.com