Restrição //Repositório JavaScript

Descrição

Classe para mascarar inputs e restringir caracteres.
Criado: 2005.10.08 - Modificado 2013.09.17

Dependências

General » Manipulador de Eventos

Código (Download)

//+ Carlos R. L. Rodrigues
//@ http://jsfromhell.com/forms/restrict [rev. #2]

Restrict = function(form){
    this.form = form, this.field = {}, this.mask = {};
}
Restrict.field = Restrict.inst = Restrict.c = null;
Restrict.prototype.start = function(){
    var $, __ = document.forms[this.form], s, x, j, c, sp, o = this, l;
    var p = {".":/./, w:/\w/, W:/\W/, d:/\d/, D:/\D/, s:/\s/, a:/[\xc0-\xff]/, A:/[^\xc0-\xff]/};
    for(var _ in $ = this.field)
        if(/text|textarea|password/i.test(__[_].type)){
            x = $[_].split(""), c = j = 0, sp, s = [[],[]];
            for(var i = 0, l = x.length; i < l; i++)
                if(x[i] == "\\" || sp){
                    if(sp = !sp) continue;
                    s[j][c++] = p[x[i]] || x[i];
                }
                else if(x[i] == "^") c = (j = 1) - 1;
                else s[j][c++] = x[i];
            o.mask[__[_].name] && (__[_].maxLength = o.mask[__[_].name].length);
            __[_].pt = s, addEvent(__[_], "keydown", function(e){
                var r = Restrict.field = e.target;
                if(!o.mask[r.name]) return;
                r.l = r.value.length, Restrict.inst = o; Restrict.c = e.key;
                setTimeout(o.onchanged, r.e = 1);
            });
            addEvent(__[_], "keyup", function(e){
                (Restrict.field = e.target).e = 0;
            });
            addEvent(__[_], "keypress", function(e){
                o.restrict(e) || e.preventDefault();
                var r = Restrict.field = e.target;
                if(!o.mask[r.name]) return;
                if(!r.e){
                    r.l = r.value.length, Restrict.inst = o, Restrict.c = e.key || 0;
                    setTimeout(o.onchanged, 1);
                }
            });
        }
}
Restrict.prototype.restrict = function(e){
    var o, c = e.key, n = (o = e.target).name, r;
    var has = function(c, r){
        for(var i = r.length; i--;)
            if((r[i] instanceof RegExp && r[i].test(c)) || r[i] == c) return true;
        return false;
    }
    var inRange = function(c){
        return has(c, o.pt[0]) && !has(c, o.pt[1]);
    }
    return (c < 30 || inRange(String.fromCharCode(c))) ?
        (this.onKeyAccept && this.onKeyAccept(o, c), !0) :
        (this.onKeyRefuse && this.onKeyRefuse(o, c),  !1);
}
Restrict.prototype.onchanged = function(){
    var ob = Restrict, si, moz = false, o = ob.field, t, lt = (t = o.value).length, m = ob.inst.mask[o.name];
    if(o.l == o.value.length) return;
    if(si = o.selectionStart) moz = true;
    else if(o.createTextRange){
        var obj = document.selection.createRange(), r = o.createTextRange();
        if(!r.setEndPoint) return false;
        r.setEndPoint("EndToStart", obj); si = r.text.length;
    }
    else return false;
    for(var i in m = m.split(""))
        if(m[i] != "#")
            t = t.replace(m[i] == "\\" ? m[++i] : m[i], "");
    var j = 0, h = "", l = m.length, ini = si == 1, t = t.split("");
    for(i = 0; i < l; i++)
        if(m[i] != "#"){
            if(m[i] == "\\" && (h += m[++i])) continue;
            h += m[i], i + 1 == l && (t[j - 1] += h, h = "");
        }
        else{
            if(!t[j] && !(h = "")) break;
            (t[j] = h + t[j++]) && (h = "");
        }
    o.value = o.maxLength > -1 && o.maxLength < (t = t.join("")).length ? t.slice(0, o.maxLength) : t;
    if(ob.c && ob.c != 46 && ob.c != 8){
        if(si != lt){
            while(m[si] != "#" && m[si]) si++;
            ini && m[0] != "#" && si++;
        }
        else si = o.value.length;
    }
    !moz ? (obj.move("character", si), obj.select()) : o.setSelectionRange(si, si);
}

Exemplo (Exemplo)

<form id="form" action=" " method="post">
    <input type="text" name="a" maxlength="10" /><br />
    Restri??o = (\\d/) Somente n?meros e "/"<br />M?scara = ##/##/####<br /><br />
    <input type="text" name="b" maxlength="14" /><br />
    Restri??o = (\\d.-) Somente n?meros, ponto e h?fen<br />M?scara = ###.###.###-##<br /><br />
    <textarea name="c" cols="4" rows="5" style="width: 300px; height: 120px;"></textarea><br />
    Restri??o = (a\\^bc) Somente os caracteres "a", "b", "c" e "^"
</form>

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

    var r = new Restrict("form");
    r.field.a = "\\d/";
    r.mask.a = "##/##/####";
    r.field.b = "\\d.-";
    r.mask.b = "###.###.###-##";
    r.field.c = "a\\^bc";
    r.onKeyRefuse = function(o, k){
        o.style.backgroundColor = "#fdc";
    }
    r.onKeyAccept = function(o, k){
        if(k > 30)
            o.style.backgroundColor = "transparent";
    }
    r.start();

//]]>
</script>

Ajuda

Construtor

Restrict(form: String)

Gera uma instância de Restrict.

form: nome ou id do formulário que receberá as validações

Propriedades

Restrict.mask: Object

Esta propriedade serve para adicionar máscara aos campos e, deve ser usada da seguinte forma:
instanciaDeRestrict.mask.nomeDoCampoNoFormulario = mascara.
Onde mascara segue as seguintes regras:

A classe substitui cada caracter "#" na máscara pelo que for pressionado pelo usuário.
Ex: mascara = "##/##/####" (para mascarar uma data)
Como o caracter "#" é de uso especial, se você precisar utilizar ele como parte da máscara, basta "comentá-lo" com "\\", ex: "\\#".
A máscara é aplicada da esquerda para a direita, sendo assim, se o campo contiver menos caracteres que a máscara, os caracteres "extras" da máscara serão ignorados.
Se a string contiver mais caracteres que a máscara, os caracteres restantes são simplesmente adicionados ao fim da máscara.

Restrict.field: Object

Esta propriedade serve para filtrar os caracteres que podem ser inseridos no campo.
Deve ser usada da seguinte forma:
instanciaDeRestrict.field.nomeDoCampoNoFormulario = filtro.
Onde filtro segue as seguintes regras:

O filtro é aplicado apenas caracter que foi pressionado e, ele é de simples manuseio, apenas digite os caracteres que você quer permitir.
Ex: filtro = "9aA." (permitirá a digitação dos caracteres "9", "a", "A", e ".")
No entanto, seria trabalhoso digitar todos os caracteres do alfabeto em um campo que deve permitir apenas letras, portanto, há expressões regulares de filtragem pré-definidas na classe, são elas:
- "." = Qualquer caracter
- "w": Somente A-z, a-z, 0-9 e _
- "W": Qualquer caracter, exceto: A-z, a-z, 0-9 e _
- "d": 0-9
- "D": Qualquer caracter, exceto 0-9
- "s": Permite espaço em branco, tabulação, quebra de linha, etc (\f\n\r\t\v)
- "a": Permite somente letras acentuadas
- "A": Permite qualquer caracter, exceto letras acentuadas
Se precisar de mais regras, basta definí-las no código fonte.
Para utilizar, basta prefixar o nome da regra com "\\".
Ex: filtro = "\\d\\s" (permite números e espaços)
Também é possível especificar exceções para o filtro usando o caracter "^".
Ex: filtro = "\\d^123" (permite 0-9, menos os caractes 1, 2 e 3)
A barra "\\" e o "^" são considerados caracteres especiais no filtro, se precisar utilizá-los, faça como no exemplo abaixo.
Ex: filter = "\\\\" (permite a barra invertida)
filter = "\\^" (permite o cincunflexo)

Métodos

Restrict.start(void): void: Inicia o objeto. Deve ser chamado depois que todas as regras já estiverem devidamente setadas.

Eventos

Restrict.onKeyRefuse: function(field: HTMLInputElement, keyCode: Integer): void

Este evento é chamado sempre que o usuário digitar um caracter inválido.

field: campo que está sendo editado
keyCode: código do caracter pressionado