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.