Logo JavaScript

AutoComplete dans les formulaires, évènement onChange et IE (10-)

Flattr this!

Salut tout le monde ! Aujourd'hui, je vais un peu cracher ma haine sur IE 10- (donc toutes les versions en fait).

Je suis dans la situation où je dois binder presque tous les évènements possibles sur un formulaire HTML. Jusque là rien de difficile, j'ai jQuery à ma dispo, je vous colle donc du on('click'), du on('change') en veux-tu en voilà et le tour est joué.

Et bien non, parce que forcément :

IE a décidé de me faire tourner en bourrique !

Il faut savoir que l'auto-complétion proposée par les différents navigateurs déclenche systématiquement l'évènement onChange sur les champs concernés par les modifications apportées par l'auto-complétion. Ceci est vrai sur Safari, Opera, Firefox et bien sûr Chrome.

Mais pas Internet Explorer. De la première à la toute dernière version toute fraîche qu'est IE 10.

Je peux même plus que confirmer l'info en citant carrément MSDN :

Using AutoComplete in HTML forms

Vous noterez la date de dernière mise à jour : 26 octobre 2012.

On vous propose alors deux solutions, binder aussi l'évènement onPropertyChange ou appliquer l'attribut suivant sur vos balises FORM :

<form autocomplete="off"></form>

Merci IE.

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans Internet Explorer, avec comme mot(s)-clef(s) , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • http://www.ghusse.com Ghusse

    Oui, et bien considère toi chanceux d’avoir un événement, pour lequel il suffit d’ajouter « propertyChange » dans ton bind.

    Il existe un cas beaucoup plus amusant : la détection du clic sur la croix (qui permet d’effacer le contenu) d’un champ texte dans IE10.

    J’ai posé la question sur stackoverflow, et finalement trouvé une solution. Mais je te laisse juger de la complexité par rapport à faire un bind(« propertyChange »).

Articles liés