How do I make a mask for an input? [duplicate]

Posted on

Question :

I’m trying to put CPF mask in a input , I’ve already seen several answers here and none worked, I tried to use mask on itself input , on jQuery and none worked.

I use the Framework Materialize . Is this what is returning this error?

    

Answer :

You can also do with pure Javascript !

<!DOCTYPE html>
<html>
	<head>
		<title>Máscara CPF</title>
		<script type="text/javascript">
			function fMasc(objeto,mascara) {
				obj=objeto
				masc=mascara
				setTimeout("fMascEx()",1)
			}
			function fMascEx() {
				obj.value=masc(obj.value)
			}
			function mTel(tel) {
				tel=tel.replace(/D/g,"")
				tel=tel.replace(/^(d)/,"($1")
				tel=tel.replace(/(.{3})(d)/,"$1)$2")
				if(tel.length == 9) {
					tel=tel.replace(/(.{1})$/,"-$1")
				} else if (tel.length == 10) {
					tel=tel.replace(/(.{2})$/,"-$1")
				} else if (tel.length == 11) {
					tel=tel.replace(/(.{3})$/,"-$1")
				} else if (tel.length == 12) {
					tel=tel.replace(/(.{4})$/,"-$1")
				} else if (tel.length > 12) {
					tel=tel.replace(/(.{4})$/,"-$1")
				}
				return tel;
			}
			function mCNPJ(cnpj){
				cnpj=cnpj.replace(/D/g,"")
				cnpj=cnpj.replace(/^(d{2})(d)/,"$1.$2")
				cnpj=cnpj.replace(/^(d{2}).(d{3})(d)/,"$1.$2.$3")
				cnpj=cnpj.replace(/.(d{3})(d)/,".$1/$2")
				cnpj=cnpj.replace(/(d{4})(d)/,"$1-$2")
				return cnpj
			}
			function mCPF(cpf){
				cpf=cpf.replace(/D/g,"")
				cpf=cpf.replace(/(d{3})(d)/,"$1.$2")
				cpf=cpf.replace(/(d{3})(d)/,"$1.$2")
				cpf=cpf.replace(/(d{3})(d{1,2})$/,"$1-$2")
				return cpf
			}
			function mCEP(cep){
				cep=cep.replace(/D/g,"")
				cep=cep.replace(/^(d{2})(d)/,"$1.$2")
				cep=cep.replace(/.(d{3})(d)/,".$1-$2")
				return cep
			}
			function mNum(num){
				num=num.replace(/D/g,"")
				return num
			}
		</script>
	</head>
	<body>

		<input type="text" name="cpf" onkeydown="javascript: fMasc( this, mCPF );">

	</body>
</html>

I have already left some masks ready: CNPJ, CEP, Telephone and numbers only.

These masks were developed based on Regular expressions . It’s worth studying about it.

    

You can use the jQuery Mask library:
link

With it you can apply various types of mask.

Just link the library in your html : https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.min.js

For CPF you should do this:

$('.cpf').mask('000.000.000-00', {reverse: true});

    

Leave a Reply

Your email address will not be published. Required fields are marked *