Ir para o conteúdo

Máscaras Enquanto Digita Er


Criado por Bruno, Out 04 2010 17:03

2 respostas neste tópico
  • Por favor, faça o login para responder

#1 Bruno

Bruno
  • Bruno
  • Colaborador
  • 33 Revisões

Revisou 04 outubro 2010 - 17:03

Máscaras com Expressões Regulares

a base desse código, funções mascara() e execmascara(), são daqui:
http://elcio.com.br/ajax/mascara/

A ER do valor monetário, eu mesmo implementei.
<html>
<head>
<script type="text/javascript">
/* Máscaras ER */
function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}
function mcep(v){
    v=v.replace(/\D/g,"")                    //Remove tudo o que não é dígito
    v=v.replace(/^(\d{5})(\d)/,"$1-$2")         //Esse é tão fácil que não merece explicações
    return v
}
function mtel(v){
    v=v.replace(/\D/g,"")                 //Remove tudo o que não é dígito
    v=v.replace(/^(\d\d)(\d)/g,"($1) $2") //Coloca parênteses em volta dos dois primeiros dígitos
    v=v.replace(/(\d{4})(\d)/,"$1-$2")    //Coloca hífen entre o quarto e o quinto dígitos
    return v
}
function cnpj(v){
    v=v.replace(/\D/g,"")                           //Remove tudo o que não é dígito
    v=v.replace(/^(\d{2})(\d)/,"$1.$2")             //Coloca ponto entre o segundo e o terceiro dígitos
    v=v.replace(/^(\d{2})\.(\d{3})(\d)/,"$1.$2.$3") //Coloca ponto entre o quinto e o sexto dígitos
    v=v.replace(/\.(\d{3})(\d)/,".$1/$2")           //Coloca uma barra entre o oitavo e o nono dígitos
    v=v.replace(/(\d{4})(\d)/,"$1-$2")              //Coloca um hífen depois do bloco de quatro dígitos
    return v
}
function mcpf(v){
    v=v.replace(/\D/g,"")                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{3})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
    v=v.replace(/(\d{3})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
                                             //de novo (para o segundo bloco de números)
    v=v.replace(/(\d{3})(\d{1,2})$/,"$1-$2") //Coloca um hífen entre o terceiro e o quarto dígitos
    return v
}
function mdata(v){
    v=v.replace(/\D/g,"");                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{2})(\d)/,"$1/$2");       
    v=v.replace(/(\d{2})(\d)/,"$1/$2");       
                                             
    v=v.replace(/(\d{2})(\d{2})$/,"$1$2");
    return v;
}
function mtempo(v){
    v=v.replace(/\D/g,"");                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{1})(\d{2})(\d{2})/,"$1:$2.$3");    
    return v;
}
function mhora(v){
    v=v.replace(/\D/g,"");                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{2})(\d)/,"$1h$2");       
    return v;
}
function mrg(v){
    v=v.replace(/\D/g,"");                                      //Remove tudo o que não é dígito
        v=v.replace(/(\d)(\d{7})$/,"$1.$2");    //Coloca o . antes dos últimos 3 dígitos, e antes do verificador
        v=v.replace(/(\d)(\d{4})$/,"$1.$2");    //Coloca o . antes dos últimos 3 dígitos, e antes do verificador
        v=v.replace(/(\d)(\d)$/,"$1-$2");               //Coloca o - antes do último dígito
    return v;
}
function mnum(v){
    v=v.replace(/\D/g,"");                                      //Remove tudo o que não é dígito
    return v;
}
function mvalor(v){
    v=v.replace(/\D/g,"");//Remove tudo o que não é dígito
    v=v.replace(/(\d)(\d{8})$/,"$1.$2");//coloca o ponto dos milhões
    v=v.replace(/(\d)(\d{5})$/,"$1.$2");//coloca o ponto dos milhares
        
    v=v.replace(/(\d)(\d{2})$/,"$1,$2");//coloca a virgula antes dos 2 últimos dígitos
    return v;
}
</script>
<style type="text/css">
label { display: block; }
</style>
</head>
<body>
	<form action="" method="post">
		<label>Hora: <input type="text" name="hora" onkeypress="mascara( this, mhora );" maxlength="5"/></label>
		<label>Real: <input type="text" name="valor" onkeypress="mascara( this, mvalor );" maxlength="14" /></label>
		<label>CEP: <input type="text" name="cep" onkeypress="mascara(this, mcep)" size="10" maxlength="9" value="" /></label>
	</form>
</body>
</html>


#2 Bruno

Bruno
  • Bruno
  • Colaborador
  • 33 Revisões

Revisou 11 outubro 2010 - 09:58

Revisão:

adicionar autotab, ao atingir maxlength do campo.
<html>
<head>
<script type="text/javascript">
/* Máscaras ER */
function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}
function mcep(v){
    v=v.replace(/\D/g,"")                    //Remove tudo o que não é dígito
    v=v.replace(/^(\d{5})(\d)/,"$1-$2")         //Esse é tão fácil que não merece explicações
    return v
}
function mdata(v){
    v=v.replace(/\D/g,"");                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{2})(\d)/,"$1/$2");      
    v=v.replace(/(\d{2})(\d)/,"$1/$2");      
 
    v=v.replace(/(\d{2})(\d{2})$/,"$1$2");
    return v;
}
function mrg(v){
        v=v.replace(/\D/g,'');
        v=v.replace(/^(\d{2})(\d)/g,"$1.$2");
        v=v.replace(/(\d{3})(\d)/g,"$1.$2");
        v=v.replace(/(\d{3})(\d)/g,"$1-$2");
        return v;
}
function mvalor(v){
    v=v.replace(/\D/g,"");//Remove tudo o que não é dígito
    v=v.replace(/(\d)(\d{8})$/,"$1.$2");//coloca o ponto dos milhões
    v=v.replace(/(\d)(\d{5})$/,"$1.$2");//coloca o ponto dos milhares
 
    v=v.replace(/(\d)(\d{2})$/,"$1,$2");//coloca a virgula antes dos 2 últimos dígitos
    return v;
}
function id( el ){
        return document.getElementById( el );
}
function next( el, next )
{
        if( el.value.length >= el.maxLength )
                id( next ).focus();
}
</script>
</head>
<body>
        Real: <input type="text" name="valor" onkeypress="mascara( this, mvalor ); next( this, 'cep' );" maxlength="14" />
        <br />
        CEP: <input type="text" name="cep" id="cep" onkeypress="mascara(this, mcep); next( this, 'rg' );" size="10" maxlength="9" value="" />
        <br />
        RG: <input type="text" name="rg" id="rg" onkeypress="mascara(this, mrg); next( this, 'data' );" size="14" maxlength="12" value="" />
        <br />
        Data: <input type="text" name="data" id="data" onkeypress="mascara(this, mdata);" size="14" maxlength="10" value="" />
</body>
</html>

e com jQuery também é possível:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.maskedinput.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        var cep = $("input[name='cep']");
        var rg = $("input[name='rg']");
        var data = $("input[name='data']");
 
        $( cep ).mask('99999-999');
        $( rg ).mask('99.999.999-9');
        $( data ).mask('99/99/9999');
 
        $("input[name='cep']").keyup(function(){
                next( $(this), rg );
        });
        $("input[name='rg']").keyup(function(){
                next( $(this), data );
        });
});
function next( el, next )
{
        var val = $( el ).val();
        var filtrado = val.replace(/[^a-zA-Z0-9]/g, '');// ER para remover tudo oque não for nem letra e nem número    
        var mask = val.match(/[-.]/g);// ER para saber quantos caracteres da máscara fazem parte da string final
 
        if( filtrado.length == $( el ).attr('maxLength')-mask.length )
                $( next ).focus();
}
</script>
</head>
<body>
        CEP: <input type="text" name="cep" size="10" maxlength="9" value="" />
        <br />
        RG: <input type="text" name="rg" size="14" maxlength="12" value="" />
        <br />
        Data: <input type="text" name="data" size="14" maxlength="10" value="" />
</body>
</html>


#3 Bruno

Bruno
  • Bruno
  • Colaborador
  • 33 Revisões

Revisou 11 outubro 2010 - 10:10

Rotina semelhante ao str_pad() (php), ao 'sair do campo':
<html>
<head>
<script type="text/javascript">
/* Máscaras ER */
function mascara(o,f){
        v_obj=o;
        v_fun=f;
        setTimeout("execmascara()",1);
}
function execmascara(){
        v_obj.value=v_fun(v_obj.value);
}
function id( el ){
        return document.getElementById( el );
}
function mnum(v){
    v=v.replace(/\D/g,"");//Remove tudo o que não é dígito
    return v;
}
window.onload = function()
{
        id('hash').onkeypress = function(){
                mascara( this, mnum );
        }
        id('hash').onblur = function(){
                var dig = this.value.length;

                while( dig<3 ){
                        this.value = '0'+this.value;
                        dig++;
                }
        }
}
</script>
</head>
<body>
        <form action="" method="post">
                <input type="text" name="hash" id="hash" maxlength="3" />
        </form>
</body>
</html>
veja que continuo usando a máscara com er proposta no código inicial, só que agora, de forma não obstrutiva, e com a adição de mais um evento.




1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)