Ir para conteúdo

POWERED BY:

Arquivado

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

tesla

[Resolvido] Adicionar funções em todos os inputs

Recommended Posts

Pessoal, to com um problema. Queria fazer um estilo específico pra quando os inputs do meu site fossem focados (onfocus). Tentei usar o focus do CSS só que o IE não tem suporte. Então fui para uma saída em javascript.

 

window.onload = function () {
	var todos = document.getElementsByTagName('input');
	for (var x = 0; x < todos.length; x++) {
		if ((todos[x].type == 'password') || (todos[x].type == 'text') || (todos[x].type == 'textarea')) {
			todos[x].onfocus = function () { this.className = this.className+' focusedinput'; };
			todos[x].onmouseover = function () { re = /^[*] focusedinput[*]$/; if(this.className.search(re) == -1) { this.className = this.className+' hoveredinput'; } };
			todos[x].onmouseout = function () { re = /^[*] focusedinput[*]$/; if(this.className.search(re) == -1) { this.className = this.className.replace(' hoveredinput', ''); } };
				todos[x].onblur = function () { this.className = this.className.replace(' focusedinput', '') };
		}
	}
}

Mas o que esse código que eu fiz executa? Ele seta todos os métodos nessessários pra gerar o efeito igual ao CSS.

 

Mas eu queria que ele INCREMENTASSE esses códigos nos métodos já existentes no input.

 

Por exemplo, se eu tivesse um input com o método assim:

onblur="Teste();"

Ele faria ficar assim:

onblur="Teste();function () { this.className = this.className.replace(' focusedinput', '') }"

 

Só que no caso ele faz isso:

onblur="Teste();"

E ele muda pro código setado no onblur:

onblur="function () { this.className = this.className.replace(' focusedinput', '') }"

 

Já tentei concatenar os métodos, já tentei tratar as funções como string, usei a função eval, mas nada dá certo... Alguém tem uma ideia?

Compartilhar este post


Link para o post
Compartilhar em outros sites

putz... dá uma olhada:

 

<html>
<head>
<style type="text/css">

</style>
<script>
window.onload = function(){
	var inputs = document.getElementsByTagName('input');
	for( var i=0; i<inputs.length;i++ ){
		addClickEvent( inputs[i], outra, false );
	}
}
function outra(){
	alert( 'coloquei depois' );
}
function addClickEvent( element, funct, boll ){
	if ( document.attachEvent || !document.addEventListener )
		element.attachEvent( 'onclick', funct );
	else
		element.addEventListener( 'click', funct, boll );
}
</script>
</head>
<body>

	<input type="text" name="tal" onclick="alert( 'já existia' )" />
	<input type="text" name="tal" onclick="alert( 'aqui também já tinha um' )" />
	<input type="text" name="tal" />

</body>
</html>

ps: a solução que você postou, funciona no IE? de que forma?

se puder postar o código completo de exemplo...

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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