Mesma função para vários imputs

[lrossato 0]

Tenho vários campos aos quais quero inserir uma máscara. A função está no evento OnKeyUp do meu imput. Um dos campos do meu form chama-se "data". Quero aplicar a mesma função no campo privi e em diversos outros. Veja a função que uso:

 

function mascara_data(data){

var mydata = '';
mydata = mydata + data;
if (mydata.length == 2){
mydata = mydata + '/';
document.forms[0].data.value = mydata;}
if (mydata.length == 5){
mydata = mydata + '/';
document.forms[0].data.value = mydata;}}

[Bru_ce 53]

Define uma classe e insira nos seus inputs !

<input type="text" class="mascara">

[lrossato 0]

Olá Bru_ce,

 

Como eu vinculo a class à function?

Já defini a class no imput como vc mostrou acima.

E na function como faço para relacionar?

[Bruno Augusto 417]

Já que você está com JavaScript "puro", isto é, sem frameworks, precisaria de uma forma de identificar os elementos pela classe informada:

 

 

<script type="text/javascript">
<!--


var getElementsByClassName=function(className,tag,elm){if(document.getElementsByClassName){getElementsByClassName=function(className,tag,elm){elm=elm||document;var elements=elm.getElementsByClassName(className),nodeName=(tag)?new RegExp("\\b"+tag+"\\b","i"):null,returnElements=[],current;for(var i=0,il=elements.length;i<il;i+=1){current=elements[i];if(!nodeName||nodeName.test(current.nodeName)){returnElements.push(current);}}
return returnElements;};}
else if(document.evaluate){getElementsByClassName=function(className,tag,elm){tag=tag||"*";elm=elm||document;var classes=className.split(" "),classesToCheck="",xhtmlNamespace="http://www.w3.org/1999/xhtml",namespaceResolver=(document.documentElement.namespaceURI===xhtmlNamespace)?xhtmlNamespace:null,returnElements=[],elements,node;for(var j=0,jl=classes.length;j<jl;j+=1){classesToCheck+="[contains(concat(' ', @class, ' '), ' "+classes[j]+" ')]";}
try{elements=document.evaluate(".//"+tag+classesToCheck,elm,namespaceResolver,0,null);}
catch(e){elements=document.evaluate(".//"+tag+classesToCheck,elm,null,0,null);}
while((node=elements.iterateNext())){returnElements.push(node);}
return returnElements;};}
else{getElementsByClassName=function(className,tag,elm){tag=tag||"*";elm=elm||document;var classes=className.split(" "),classesToCheck=[],elements=(tag==="*"&&elm.all)?elm.all:elm.getElementsByTagName(tag),current,returnElements=[],match;for(var k=0,kl=classes.length;k<kl;k+=1){classesToCheck.push(new RegExp("(^|\\s)"+classes[k]+"(\\s|$)"));}
for(var l=0,ll=elements.length;l<ll;l+=1){current=elements[l];match=false;for(var m=0,ml=classesToCheck.length;m<ml;m+=1){match=classesToCheck[m].test(current.className);if(!match){break;}}
if(match){returnElements.push(current);}}
return returnElements;};}
return getElementsByClassName(className,tag,elm);};
//-->
</script>

 

Espero ter copiado o código certo >.<

 

Infelizmente não lembro onde ou quando encontrei esse código e nem de quem é a autoria.

Se bem que, eu ACHO que se você iterasse os elementos retornados por document.getElementsByTagName(), com algumas verificações, claro, talvez seja suficiente.

Mas eu não manjo tanto assim...

[cristianoolv 93]

var c = document.querySelectorAll("input.m");

 

for(var x =0; x<=c.length -1; x++){

c.item(x).onkeyup = function(){

console.log(this.value);

}

}

[Bruno Augusto 417]

Será que compensa a nível de compatibilidade?

 

Caramba, até pouco tempo atrás ainda tinha gente usando o IE 6. Depois que esse foi finalmente declarado morto tenho para comigo que ainda muita gente deve estar com o IE 7.

 

E pela lista, querySelectorAll() está disponível, nesse navegador, a partir da versão 8.

[cristianoolv 93]

Até jQuery já abandonou suporte pra ei8, não vai ser eu que vou fizer escrevendo gambiarras pra rodar em gambiarra...

[lrossato 0]

^{Pessoal, Obrigado pelas dicas mas ainda continuo na mesma.}

^{Na minha ignorância, achei que uma função que pegasse o nome do imput em foco seria a solução. Então consegui a seguinte função:}

^{function Identifica(campo) {
var nome = campo.name;
nome;}}

 

^{Dai fiz a seguinte alteração naquela function:}

^{function mascara_data(data){}

^{var data = Identifica(this); //Esta variável assume o valor do imput em foco}

^{var mydata = '';
mydata = mydata + data;
if (mydata.length == 2){
mydata = mydata + '/';
document.forms[0].data.value = mydata;}
if (mydata.length == 5){
mydata = mydata + '/';
document.forms[0].data.value = mydata;}
if (mydata.length == 10){
verifica_data();}}}

^{Então apliquei no meu form e nada de dar certo.}

^{<form>
<input type="text" name="data" id="data" OnKeyUp="mascara_data(this.value)" maxlength="10"> dd/mm/aaaa<br>}

^{<input type="text" name="nasc" id="nasc" OnKeyUp="mascara_data(this.value)" maxlength="10"> dd/mm/aaaa<br>}

^</form>

^{Acho que só falta algum detalhe pra dar certo}

[romerito 11]

i aew cara, ve se isso te ajuda:

function mascara_data(objInput){
   var newValue = objInput.value
			.replace(/\D/g,'')
			.split(/(\d{2})/g)
			.filter(function(v){return (v!='')})
			.map(function(v,i,a){return (i<2&&v.length==2)?v+'/':v;})
			.join('');
					
   objInput.value = newValue;	
				
}

e o html ficaria assim:

<input type="text" name="data" id="data" OnKeyUp="mascara_data(this)" maxlength="10"/><br>
<input type="text" name="nasc" id="nasc" OnKeyUp="mascara_data(this)" maxlength="10"/>

espero que ajude, abraço!

[lrossato 0]

Obrigado romerito,

Copiei e colei do jeito que vc postou mas não deu certo. A página completa no txt está abaixo, será que tem alguma outra coisa errada? Abç

 

<html>
<head>
<script language="JavaScript" type="text/javascript">

function mascara_data(objInput){
var newValue = objInput.value
.replace(/\D/g,'')
.split(/(\d{2})/g)
.filter(function(v){return (v!='')})
.map(function(v,i,a){return (i<2&&v.length==2)?v+'/':v;})
.join('');

objInput.value = newValue;

</script>
</head>
<body>
<form>
<input type="text" name="data" id="data" OnKeyUp="mascara_data(this)"

maxlength="10"/><br>
<input type="text" name="nasc" id="nasc" OnKeyUp="mascara_data(this)" maxlength="10"/>
</form>
</body>
</html>

[romerito 11]

Obrigado romerito,

Copiei e colei do jeito que vc postou mas não deu certo. A página completa no txt está abaixo, será que tem alguma outra coisa errada? Abç

 

<html>

<head>

<script language="JavaScript" type="text/javascript">

 

function mascara_data(objInput){

var newValue = objInput.value

.replace(/\D/g,'')

.split(/(\d{2})/g)

.filter(function(v){return (v!='')})

.map(function(v,i,a){return (i<2&&v.length==2)?v+'/':v;})

.join('');

 

objInput.value = newValue;

 

</script>

</head>

<body>

<form>

<input type="text" name="data" id="data" OnKeyUp="mascara_data(this)"

maxlength="10"/><br>

<input type="text" name="nasc" id="nasc" OnKeyUp="mascara_data(this)" maxlength="10"/>

</form>

</body>

</html>

cara testei no FF e no Chrome e funcionou, pelo que vi no que você colou aqui, você esqueceu de fechar a chave da function mascara_data, será que você copiou errado?

[lrossato 0]

Puxa vida romerito é verdade!

A sua function tbém estava sem chave e eu nem percebi.

 

Eu estava testando no IE-8 e nele não funciona, mas agora testei no FF e deu certo.

Talvez seja o caso de abrir um outro post para saber porque não funciona no IE, mas isso é outro assunto.

De qualquer maneira vc já ajudou muito.

Obrigado e abç.

[romerito 11]

I aew cara, tenta mais ou menos assim:

function mascara_data(obj){
	var oldValue = obj.value.replace(/\D/g,'').split('');
	var newValue = '';
	for (i in oldValue){
		newValue += oldValue[i];
		if (i == 1 || i == 3){
			newValue += '/';
		}	
	}
	obj.value = newValue;
}

 

essa fução faz a mesma coisa que a outra que eu havia postado, dai pra frente você vai mexendo de acordo com as sua necessidades, abraço!

 

Edit: Subi uma VM pra testar no IE, suhasuhauh!

[lrossato 0]

Olá romerito,

Nossa cara agora funcionou no IE.

 

Naquela primeira função que eu havia postado eu entendia passo a paso e linha a linha o que a function fazia.

Se não for abusar da sua boa vontade vc poderia comentar o passo a passo ou linha a linha das suas funções. Tenho certeza que muitos vão aprender bastante

 

Obrigado de novo.

[romerito 11]

Legal que funcionou cara, fico feliz que tenha se interessado em saber o que cada linha faz, legal mesmo da sua parte, isso prova que você quer aprender e não só pegar coisar prontas!

Não sou tão bom em explicar, mas vou tentar!

/**
 * obj representa o objeto input passado para esta função ou seja ele é esse cara aqui:
 * <input type="text" name="data" id="data" OnKeyUp="mascara_data(this)" />
 */
function mascara_data(obj){

    // seta a variavel oldValue com o valor que esta no input

    var oldValue = obj.value

    .replace(/\D/g,'') // remove tudo que não é número

    // tranforma a strig em lista/array, cada caracter é um item da lista

    .split(''); 

    var newValue = ''; // cria uma string vazia

    // faz a iteração em todos os item da lista

    for (i in oldValue){

        newValue += oldValue; // concatena newValue com o item da lista

        // verifica se o indice é igual a 1 ou 3

        if (i == 1 || i == 3){

            /**
             * Se for ele adiciona "/"(lembrando que o indice começa do 0)
             * ao novo valor, pois a mascara exige isso: dd/mm/yyyy
             */
            newValue += '/';

        }

    }

    // seta o novo valor no objeto passado como referência

    obj.value = newValue;
}

Falow cara, abraço!

[Bruno Augusto 417]

@romerito, editei 90% do seu último post para consertar os BBCode que ficaram encavalados uns nos outros.

 

Assim fica até mais fácil de ler a explicação. :thumbsup:

[romerito 11]

@romerito, editei 90% do seu último post para consertar os BBCode que ficaram encavalados uns nos outros.

 

Assim fica até mais fácil de ler a explicação. :thumbsup:

valeu cara, eu tinha cagado tudo tentei consertar e ficou pior, auhsuhasuh!

[lrossato 0]

Nossa cara, ficou muito boa sua explicação.

No entanto, percebi que a primeira function rodava no FF e não no IE e a segunda roda no IE e não no FF.

 

Encontrei uma function que permite somente números e que roda no IE e no FF graças a dois IF.

Tentei adaptar os IF naquela sua function p/ rodar no FF e no IE mas não pegou.

 

A function é a seguinte:

 

function numeros(){

if (document.all) // Internet Explorer
var tecla = event.keyCode;
else if(document.layers) // Nestcape
var tecla = e.which;

if ((tecla > 47 && tecla < 58)) // numeros de 0 a 9
return true;
else {
if (tecla != 8) // backspace
//event.keyCode = 0;
return false;
else
return true; }}

 

Ainda tenho muito que aprender.

Abç

[lrossato 0]

romerito,

 

Quero corrigir o que acabei de falar acima.

Testei novamente no IE e no FF e a sua function roda em ambos. Acontece que eu estava rodando uma outra function (esta que só aceita número citada acima) simultaneamente com sua function e com certeza estava gerando conflito.

Assim que percebi isso eu deixei só a function mascara_data e ficou redondinho.

 

Abç

[lrossato 0]

Pessoal,

 

Não adianta nada ter uma data se ela não for consistente, não é mesmo?

Então quando a data estiver completa é bom verificarmos se está correta.

Dessa forma inclui um "if" para chamar outra function:

 

function mascara_data(objInput){
var newValue = objInput.value
.replace(/\D/g,'')
.split(/(\d{2})/g)
.filter(function(v){return (v!='')})
.map(function(v,i,a){return (i<2&&v.length==2)?v+'/':v;})
.join('');

objInput.value = newValue;

if (newValue.length==10){ //ADICIONEI UM "IF" P/ VER SE A DATA ESTÁ COMPLETA
verifica_data();}} //MANDEI EXECUTAR A FUNÇÃO QUE VERIFICA A DATA

 

 

function verifica_data () {
var data = ''; //DEFINI UMA VARIÁVEL COMO VAZIA
var data = obj.value; //DEFINI ESTA VAR COM O VALOR DO OBJETO, QUE NO CASO É A DATA COMPLETA

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.focus();}}

 

E não consegui entender o que deu errado!!!