Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Jim Joice

[Resolvido] Input para cpf e telefone

Por , em Javascript

Recommended Posts

Jim Joice    0

Jim Joice
Postado

Gostaria de saber como eu faço para os pontos e traço do cpf, e parenteses do telefone aparecerem à medida que o usuário for digitando em um input.

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Schiavon    0

João Schiavon
Postado

Tenho estes exemplos para data e hora, servirá como referência para você, abraço

 

<html>
<head>
<title>Validação de Data e Hora</title>
<script type="text/javascript">

function mascaraData(campoData){

	var data = campoData.value;
	
	if (data.length == 2){
		data = data + '/';
		document.forms[0].data.value = data;
		return true;
	}
	
	if (data.length == 5){
		data = data + '/';
		document.forms[0].data.value = data;
		return true;
	}
	
	if (data.length == 10) {
		verificaData();
		if (situacao == '') {
			document.forms[0].hora.focus();
		}
	}
}

function verificaData () {

	dia = (document.forms[0].data.value.substring(0,2));
	mes = (document.forms[0].data.value.substring(3,5));
	ano = (document.forms[0].data.value.substring(6,10));
	
	situacao = '';
	
	// verifica o dia valido para cada mes
	if ( (dia < 01) || (dia < 01 || dia > 30) && ( mes == 04 || mes == 06 || mes == 09 || mes == 11 ) || dia > 31) {
		situacao = 'falsa';
	}
	// verifica se o mes e valido
	if ( mes < 01 || mes > 12 ) {
		situacao = 'falsa';
	}
	// verifica se e ano bissexto
	if ( mes == 2 && ( dia < 01 || dia > 29 || ( dia > 28 && ( parseInt(ano /4) != ano / 4) ) ) ) {
		situacao = 'falsa';
	}
	if (document.forms[0].data.value == "") {
		situacao = 'falsa';
	}
	if (situacao == 'falsa') {
		alert('Data inválida!');
		document.forms[0].data.value = '';
		document.forms[0].data.focus();
	}
}

function mascaraHora(campoHora){

	var hora = campoHora.value;
	
	if (hora.length == 2){
		hora = hora + ':';
		document.forms[0].hora.value = hora;
		return true;
	}
	if (hora.length == 5){
		hora = hora + ':';
		document.forms[0].hora.value = hora;
		return true;
	}
	if (hora.length == 8){
		verificaHora();
	}
}

function verificaHora(){

	hrs = (document.forms[0].hora.value.substring(0,2));
	min = (document.forms[0].hora.value.substring(3,5));
	seg = (document.forms[0].hora.value.substring(6,8));
	
	//alert('hrs ' + hrs);
	//alert('min ' + min);
	//alert('seg ' + seg);
	
	situacao = '';
	
	// verifica hora
	if ( ( hrs < 00 ) || ( hrs > 23 ) || ( min < 00 ) || ( min > 59 ) || ( seg < 00 ) || ( seg > 59 ) ) {
		situacao = 'falsa';
	}
	if (document.forms[0].hora.value == '') {
		situacao = 'falsa';
	}
	if (situacao == 'falsa') {
		alert('Hora inválida!');
		document.forms[0].hora.value = '';
		document.forms[0].hora.focus();
	}
}
</script>

</head>

<body>
	<h3>Executa a validação de data/hora e cria uma máscara no campo input.</h3>
	<form>
		<input type="text" name="data" onkeyup="mascaraData(this);" maxlength="10" />
		dd/mm/aaaa
		<br />
		<input type="text" name="hora" onkeyup="mascaraHora(this);" maxlength="8" />
		hh:mm:ss
		<br />
		<input type="submit" name="enviar" value="Enviar" />
	</form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Assim funciona, mas já tive problemas com o Fx...

 

tente por expressões regulares:

 

function mascara(o, f){
		v_obj = o;
		v_fun = f;
		setTimeout(execmascara, 1);
	}
	
	function execmascara(){
		v_obj.value = v_fun(v_obj.value);
	}

	function mcpf(v){
		v = v.replace(/\D/g, ""); //Remove tudo o que não é dígito
		v = v.replace(/(\d{3})(\d)/, "$1.$2");
		v = v.replace(/(\d{3})(\d)/, "$1.$2");
		v = v.replace(/(\d{3})(\d)/, "$1-$2");
		v = v.replace(/(.{14})(.*)/, "$1");
			return v;
	}
	
	function mtelefone(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{4})(\d)/, "$1-$2");
		v = v.replace(/(.{14})(.*)/, "$1");
			return v;
	}

No HTML:

 

<input type="text" id="cpf" onkeyup="mascra(this, mcpf);"/>
<input type="text" id="telefone" onkeyup="mascra(this, mtelefone);"/>

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito