[Resolvido] função onload chamar outras funções em diversas ids

[William Bruno 1501]

Boa Noite galera... :rolleyes:

Eu estava aqui trabalhando num formulário, e pensei.."Putz.. colocar todos esses "onBlur", e "onFocus" em cada um dos inputs, em cada uma das trocentas págnias que tenho um formulário, tá me atrazando..."

Então, aproveitei uma chamada de função que vi num exemplo, e fiz o seguinte:

window.onload=function(){
	var cepOrigem = document.getElementById('cepOrigem');
	var cepDestino1 = document.getElementById('cepDestino1');
	var complemento = document.getElementById('complemento');

	cepOrigem.onblur=function() {
		mudacor(this,'#FFFFFF');
		return false;
	};
	cepOrigem.onfocus=function() {
		mudacor(this,'#FDF3F2');
		return false;
	};
	cepDestino1.onblur=function() {
		mudacor(this,'#FFFFFF');
		return false;
	};
	cepDestino1.onfocus=function() {
		mudacor(this,'#FDF3F2');
		return false;
	};
	complemento.onblur=function() {
		mudacor(this,'#FFFFFF');
		return false;
	};
	complemento.onfocus=function() {
		mudacor(this,'#FDF3F2');
		return false;
	};
};
function mudacor(ref,cor){
		ref.style.backgroundColor=cor;
}

Enfim, dessa forma, qualquer que seja a minha função, eu não preciso colocar ela no meio do HTML, e consigo deixar o JS totalmente externo. Achei interessante.. mas tenho 15~20 inputs.. e desse jeito eu apenas "reproduziria" o problema..

A questão: Alguém tem uma idéia de como "melhorar" o script? Apenas o tornando menor...

sei lá.. varrendo todas as ids do formulário.. reutilizando as funções...

Eu tentei criar uma função com parâmetro para a id do input mas não consegui. Enfim, acho que com esse "conceito", estilizar formulários com JS vai ficar muito mais "bonito", e fácil.

Encontrei funções de onBlur e onFocus melhores.. mas a idéia que procuro é o conceito de como as carregar.

[andreia_sp 1]

rapaz isso eh loko mesmo... eu sei q tem um esquema pra fazer mas nao me lembro agora faz tempo ja...

 

prometo olhar com mais calma pra ver se acho e te digo ok.

Tomara que alguem ache antes e compartilhe conosco :)

[William Bruno 1501]

Conversando com um amigo, ex-programador da empresa em que eu estou agora, chegamos no seguinte:

window.onload=function(){
var arrObj = document.getElementsByTagName("INPUT");

	for( var i=0; i<arrObj.length; i++ ) {
		arrObj[i].onfocus= function() {
		mudarClass('nodestaque',this);
		}
		arrObj[i].onblur= function() {
		mudarClass('tabe',this);
		}
	}
}
	function mudarClass(nomeClasse,ids){
		ids.className = nomeClasse;
	}

E os css:

.nodestaque {
	padding: 2px;
	background-color: #FDF3F2;
	border: 1px solid #ED6E37;
}
.tabe {
	border: 1px solid #ED6E37;
	background-color: #fff;
}

Eu fiquei feliz com o resultado, só um inconveniente, adicionei por causa do layout, um relógio digital que marca os segundos, e ele roda dentro de um input text, e nesse caso, ele tb é estilizado.

Bom enfim, tá ai ^^' se alguém tiver outra solução... só falar.