Ordem dos eventos do formulário HTML

22 de janeiro de 2008 10 respostas

danieldestro 22 de janeiro de 2008

Olá,

Os navegadores web adoram me atormentar.

Estou fazendo uma biblioteca que inclui funções Javascript a serem executadas, mas ao que parece a diferença de comportamento dos navegadores (IE e Firefox principalmente), me causa problemas não muito triviais.

O caso é a ordem de execução (disparo) dos eventos relacionados aos campos de um formulário HTML.

Fiz um teste com o seguinte HTML e o resultado foi assim. Executei a seguinte seqüência de eventos:

Clique com o mouse sobre o campo
Digitei o número 1
Clique com o mouse fora do campo

HTML:<html> <head> <script language="JavaScript" type="text/javascript"> function show(msg) { document.getElementById("eventos").value += msg + "\n"; } </script> </head> <body> <form name="frm"> <input type="text" name="cpf" onclick="show('click');" onkeydown="show('keydown');" onkeyup="show('keyup');" onkeypress="show('keypress');" onchange="show('change');" onblur="show('blur');" onfocus="show('focus');" id="cpf"> <hr/> <textarea id="eventos" name="eventos" rows="15" cols="10"></textarea> </form> </body> </html>

Resultado IE:

focus
click
keydown
keypress
keyup
change
blur

Resultado Firefox:

focus
click
keydown
keypress
keyup
blur
change

Os navegadores executem os eventos BLUR/CHANGE em ordem inversa, comportamento que pode dar um resultado inesperado para o meu sistema, dependendo do navegador.

O problema maior é que, nesta biblioteca que estou criando, posso adicionar funções Javascript para tratamento dos campos como, por exemplo, formatação. Trabalhar com navegadores diferentes vai me causar problemas, pois posso lidar com valores diferentes dependendo do navegador, pois ele pode executar um tratamento do valor antes ou depois de ele ter sido formatado. Que lástima!

Alguém sugere alguma solução?

10 Respostas

Feijao 22 de jan. de 2008

Destro, você vive sendo atormentado, mas você sabe BEM que o problema é o Firefox porque o IE é maravilhoso!

Bem, quebrei a cabeça aqui e pensei no seguinte, já que o problema é que os eventos change e blur são invertidos de preferência em cada browser, pois algum dos dois não implementou W3C direito, pensei em fazer uma gambi, um workaround ou um POG. Se ele não estiver perfeito você pelo menos tem uma luz.

Veja aí o que você acha:

<html>  
<head>  
<script language="JavaScript" type="text/javascript">  
function show(msg, input, e) {

	if (e.type == 'blur') {
		if (input.onchange && e.preventDefault) {
			input.onchange.call(this, e);
			e.preventDefault();
			input.onchange = input.onblur;
			return;
		}
	}
	
	document.getElementById("eventos").value += msg + "\n";
}  
</script>  
</head>  
<body>  
<form name="frm">  
<input type="text" name="cpf" onclick="show('click', this, event);" onkeydown="show('keydown', this, event);"   
  onkeyup="show('keyup', this, event);" onkeypress="show('keypress', this, event);"   
  onchange="show('change', this, event);" onblur="show('blur', this, event);"   
  onfocus="show('focus', this, event);" id="cpf">  
<hr/>  
<textarea id="eventos" name="eventos" rows="15" cols="10"></textarea>  
</form>  
</body>  
</html>

O que fiz foi inverter a ação do change e do blur quando é detectada a utilização do Firefox no momento do evento blur quando o input possui também o change.

A minha dúvida é se isso não pode dar pau em outros momentos, mas isso aí já é uma luz.

Boa sorte.

danieldestro 23 de jan. de 2008

Segundo li na especificação do W3C, ele não define uma ordem para execução dos eventos:
http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.3

nbluis 23 de jan. de 2008

Isso é uma piada de mal gosto ? :shock:

Feijao 23 de jan. de 2008

HUhuahuahua sem comentários.

Tecnoage 23 de jan. de 2008

Ó o feijão LOKO ae!!! huahuahua

danieldestro 23 de jan. de 2008

Outra coisa.

Se você altera o value do campo via javascript, antes do BLUR, o Firefox não dispara o evento onChange.

Acho que o FF tá deixando a desejar.

Feijao 23 de jan. de 2008

Acho que sua alternativa é usar somente IE mesmo.
Aliás, use o 7 porque o 6 é um lixo total.

Esse negócio do FF é foda, assim como existem outras coisas muito fodas no IE também.

Não tem jeito, faça somente o arroz e feijão mesmo para evitar dor de cabeça.

boa sorte.

danieldestro 23 de jan. de 2008

No IE, quando um campo tem o foco e você pressiona TAB, ocorrem os seguintes eventos:

onKeyDown, onBlur, onFocus (no campo seguinte), onKeyUp

No Firefox ocorre:

onKeyDown, onKeyPress, onBlur, onFocus (no campo seguinte), onKeyUp

Ou seja, no Internet Explorer, para teclas especiais, ele não executa o onKeyPress.

Eu já estou ficando maluco!

Feijao 24 de jan. de 2008

Destro, acredito não haver solução para seu problema.

Uma coisa que talvez possa ser realizada é um mapeamento dos eventos e suas seqüências e implementar alguma lógica que faça com que os eventos sejam sempre chamados na seqüência definida.

Existe um eventListener que talvez funcione.

danieldestro 24 de jan. de 2008

Desisti já. Bug do Firefox, falta de padrão do IE e do FF. Enfim!
Acabei mudando o esquema e funciona como esperado.
Obrigado!

Criado 22 de janeiro de 2008

Ultima resposta 24 de jan. de 2008

Respostas 10

Participantes 4

10 Respostas

Topicos relacionados