Ordem dos eventos do formulário HTML

Front-end
#1

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:[quote]focus
click
keydown
keypress
keyup
change
blur[/quote]

Resultado Firefox:[quote]focus
click
keydown
keypress
keyup
blur
change[/quote]

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?

#2

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.

#3

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

#4

Isso é uma piada de mal gosto ? :shock:

#5

HUhuahuahua sem comentários.

#6

Ó o feijão LOKO ae!!! huahuahua

#7

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.

#8

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.

#9

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!

#10

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.

#11

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

#12