Ir para conteúdo

POWERED BY:

Arquivado

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

Lúcio Gomes

Identificar somente a quantidade de caracteres alfanuméricos digitados

Por , em Javascript

Recommended Posts

Lúcio Gomes    0

Lúcio Gomes
Postado

Eu estou usando essa função de javascript pra ir para o próximo campo assim que terminar de digitar campos com limite máximo (por exemplo: data, telefone, cep...):

 

function proximoCampo(atual,proximo){
		if(atual.value.length >= atual.maxLength){ document.getElementById(proximo).focus(); }
	}

Peguei essa função em um fórum, buscando no Google. Até aí tudo bem, mas também estou usando máscaras (com um plugin do jquery) e quando a pessoa clica no campo data por exemplo exibe:

 

__/__/____

 

E então a pessoa digita o texto e daí já fica formatado conforme vai digitando: 20/04/2010

 

O problema é que logo quando a pessoa clica no campo data e exibe o formato:

__/__/____

 

A função do javascript já interpreta que já foram digitados os 10 caracteres e nem deixa a pessoa digitar o valor e já vai para o próximo campo.

 

Será que há algum jeito de resolver isso? Identificando por exemplo se não é _ (que é o caracter que eu uso como máscara e que é substituído pelo texto)? Ou identificando se há texto ou número digitado, preenchendo todos os campos? Daí ao invés de atingir o limite de 10 caracteres no campo data, atingir o limite de 8 dígitos numéricos, só pegando os números, mas sem perder a máscara.

 

Enfim, aceito sugestões, pois já faz tempo que estou pesquisando isso, tentando e não consegui sair do lugar ainda. :(

 

Obrigado.

 

Será que não é possível fazer isso? rssrs

Pelo visto não é tão complicado, é questão de achar a solução correta. Infelizmente já busquei e fiz diversos testes, mas ainda não consegui.

 

Se alguém puder me ajudar, pode ser também utilizando alguma biblioteca javascript como jQuery se for o caso.

Mas estou precisando muito disso.

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, se você tiver disposto à trocar de máscara, essas com ER são muito boas, e não te darão esse tipo de problema:

http://forum.imasters.com.br/index.php?/topic/392937-evitar-letras-no-lugar-de-digitos/page__view__findpost__p__1532871

<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>
Mas qnto ao que você pediu, é possível fazer com ER, e assim continuar usando a máscara jQuery. Porém dá um pouquinho de trabalho.. veja:

<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>

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