Javascript – Problema com Evento Change

Browsers
14, outubro 2009

Semana passada deparei-me com um problema no Internet Explorer (Déjà vu).
A funcionalidade que precisavamos implementar era bem simples:
Verificar se o formulário foi alterado. Ou seja, se o usuário está na página e resolve simplesmente sair e o formulário foi alterado, precisavamos alerta-lo.
O que me ocorreu na hora foi utilizar o Evento change do <form>.

Fiz o teste no Firefox e tudo ocorreu como o previsto. Ao alterar o valor de qualquer elemento dentro do formulário o evento change é disparado.
Mas… e no nosso “amigo” Internet Explorer?
Surpresa!
Não funcionou. Então fui pesquisar para ver o porque do problema.
Neste link  http://www.quirksmode.org/dom/events/change.html do QuirksMode fica bem fácil de entender.
O que acontece é que no Internet Explorer o evento change não é disparado ao alterar um formulário.

Nota: Percebam que é somente no IE que isso acontece. Abaixo segue a lista de Browsers que suportam o evento change no Formulário:

FF 2.0 FF 3.0 FF 3.1b2 Saf 3.0 Win Saf 3.1 Win iPhone 3G Chrome 1.0 Opera 9.62 Opera 10a Konqueror 3.5.7
Fonte: QuirksMode.

Outra Nota: No IE o evento change também não é disparado nos objetos window e document. Em todos da lista acima sim.
Para o Internet Explorer o único elemento que dispara o evento change corretamente  é o <input>.

Solução:
Como o projeto estava utilizando jQuery foi simples resolver mais um problema no IE. Segue o código abaixo:


$("form *").bind("change", function(){ /* Código aqui*/});

O código acima varre todos elementos do formulário e “atacha” o evento change para cada um deles.

Bom, é isso.
Trabalhando e aprendendo.

FF 2.0 FF 3.0 FF 3.1b2 Saf 3.0 Win Saf 3.1 Win iPhone 3G Chrome 1.0 Opera 9.62 Opera 10a Konqueror 3.5.7

4 Respostas para “Javascript – Problema com Evento Change”

    • jaydson

      Olá Carlso, segue abaixo um exemplo:

      var formChanged=false;

      $(“form *”).bind(“change”, function(){
      formChanged = true;
      });

      Simples assim.
      Desta maneira quando algum elemento do for alterado a variável formChanged terá o valor true.
      Basta agora na sua aplicação definir o que fazer com essa variável.
      No meu caso o que fiz foi no evento onbeforeunload verificar se a variavel era true. Tipo isso:
      window.onbeforeunload = function(){
      if(formChanged){
      return “O formulário foi alterado, tem certeza que deseja sair desta página?”
      }
      }

      Qualquer dúvida poste aqui.

      Abraço.

      Responder
  1. wendell palazzo

    Aproveitando… este mesmo problema acontece no select tb…

    dae tive criar um function e colocar no evento onchange do select..

    no ff.. o jQuery().change() funfa…
    no ieCA não..rsrs abraços..

    Responder

Deixar uma Resposta