(Resolvido) Algorítmo para inserir mascara

[Rafael Laurindo]

Pessoal, to tentando programar um script não permitirá, por exemplo, a entrada de strings em campos que somente deverão aceitar números. Gostaria de fazer isso, quando o usuário tentar digitar um caracter inválido, esse caracter não fosse nem inserido, ou seja, o cursor ficasse exatamente onde está, permitindo assim a entrada de somente caracteres válidos. Eu fiz um script, só que este, apaga o último caracter inserido, mas não é isso que quero, se o usuário segurar o botão aparecerá uma porrada, e só o último é apagado.

Editado Julho 17, 2010 por Rafael Laurindo

[OxCom]

Rafael,

Utilizo um plugin do Jquery (jquery.meio.mask.js): http://www.meiocodigo.com/projects/meiomask/

importo o jquery.js e o jquery.meio.mask.js

dentro dos inputs que você deseja utilizar uma 'máscara', coloque no atributo ALT o tipo de máscara (no arquivo jquery.meio.mask.js tem todos os nomes de máscaras.

<input type="text" alt="integer"><!-- SOMENTE INTEIROS -->
 <input type="text" alt="decimal"><!-- DECIMAL COM 2 casas -->
 <input type="text" alt="date"> <!-- DATA -->

depois é só colocar no evento load da página (ou onde você quiser hauah):

$('input:text').setMask();

Eu gosto de utilizar esse plugin pois você pode criar as máscaras.

[Rafael Laurindo]

Resolvido galera, depois de muito buscar. Fiz a minha versão baseada neste tópico: http://scriptbrasil.com.br/forum/index.php...mp;#entry301595

function validateInput(type, value){
    //type = mixed(text and number only) | text | lessNumber(texto e caracters especiais) | number
    if (type == 'number'){
        //valores de 0 a 9, procurar somente no último caracter da string. Deve estar delimitada por duas barras //
        var exp = new RegExp("[0-9]"); // o mesmo que exp = '/[0-9]/'
        if(exp.test(value))
            return true;
        return false
    }
}

function mask(id, format, evt){
    var el = document.getElementById(id);
    var currPos = el.value.length;
    var keyCode = evt.which

    //Padrão em máscaras
    switch(keyCode)
    {
        case 0:    //teclas de atalho
        case 8:    //backspace
        return true;
    }
    Permite que a máscara, seja inserida, se no lugar certo.
    if(String.fromCharCode(keyCode) === format.charAt(currPos))
        return true;
    
    //Mais para frente, ver como não precisar colocar o return
    //tentar fazer assim, el.onkeypress = function (){ return ...}
    
    //Cria a máscara
    //O que se digita é sempre 1 caracter, delimitado pelo x, a mascara inserida pode ser 1 ou mais
    var i = currPos
    var mascara = ''
    while(format.charAt(i) != 'x' && format.charAt(i) != ''){
        mascara += format.charAt(i)
        i++;
    }
    
    var valid = validateInput('number', String.fromCharCode(evt.which))
    //mascara    
    if (valid)
        if(mascara)
            el.value += mascara

    //Um caracter inválido, faz com que nada seja inserido na caixa de texto. Dando a idéia de travamento de cursor em um caracter inválido
    return valid;
}

Tel: <input id="txtTel" type="text" onkeypress="return mask(this.id, '(xx) xxxx-xxxx', event)" maxlength="14" title="só numeros"/>

Use-o somente com evento onkeypress. Ah, e até agora só funciona nos navs que segue padrões, baseados em Netscape. Façam as devidas alterações para funcionar em outros, e postem aí.

Abs. Até a próxima

Editado Julho 17, 2010 por Rafael Laurindo