Máscara cartão de crédito com javascript e expressão regular – regex

EU já havia postado diversas máscaras com javascript e regex, e hoje um cara no fórum pediu uma máscara para cartão de crédito.

É bem simples, 4 grupos de números separados por espaços.”9999 9999 9999 9999″.
Eu odeio os plugins de máscaras, pois eles sempre dão algum tipo de problema, como impedir usar backspace, o backspace funcionar até se tiver readonly, comer números, ser impossível editar corretamente, jogar o cursor no lugar errado..

Então eu sempre uso essas máscaras com expressões regulares. Funcionam muito bem, são super crossbrowsers, e tem ótima performance.

<html>
<head>
    <title>Mascara Cartão de Crédito</title>
<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 mcc(v){
    v=v.replace(/\D/g,"");
    v=v.replace(/^(\d{4})(\d)/g,"$1 $2");
    v=v.replace(/^(\d{4})\s(\d{4})(\d)/g,"$1 $2 $3");
    v=v.replace(/^(\d{4})\s(\d{4})\s(\d{4})(\d)/g,"$1 $2 $3 $4");
    return v;
}
function id( el ){
	return document.getElementById( el );
}
window.onload = function(){
	id('cc').onkeypress = function(){
		mascara( this, mcc );
	}
}
</script>

</head>
<body>

    <input type="tel" name="cc" id="cc" maxlength="19" />

</body>
</html>

Comente se vc usar também.

5 Comments

  1. Cara, no seu acontece a mesma coisa que no que eu tinha feito, ou seja, não funciona em mobile. Você chegou a testar nisso?

    To tomando uma surra aqui.

  2. Mais um excelente post! Seu blog é muito bom, não pare de postar!

  3. Valeu pelo post Bruno. Ficou uma dúvida, não entendi o uso que a função `execmascara` faz das variáveis da função `mascara`, inclusive é enviado um parâmetro para uma delas.

Deixe uma resposta

Your email address will not be published.

*