Compatibilité html onchange / onblur

Question

Je suis en train d'écrire un site Web qui doit être compatible avec tous les navigateurs, y compris IE retour à la version 6.

Je me demandais des problèmes de compatibilité avec ces deux événements en particulier: Je les utilise avec une étiquette de <input> avec type='text'.

• OnBlur
• OnChange

Recherche a trouvé des réponses mitigées et une liste incomplète.

Plus précisément, la question est:

• Y a-t-il des problèmes connus avec les deux événements ci-dessus (pourrait être étendu à d'autres événements HTML)?
• Si oui, quelles méthodes peuvent être utilisées pour contourner ces problèmes?

Toute aide appréciée:)

Answer 1

Tous les navigateurs devraient soutenir ces événements assez décemment si vous ne les utiliser dans des zones de texte. Si vous consultez le Quirksmode tables de compatibilité des événements , vous verrez que IE a quelques problèmes avec l'événement de changement de boutons radio et cases à cocher.

Si vous n'êtes pas très familier avec les événements JavaScript dans les navigateurs, vous constaterez que le modèle d'événement est un gâchis grâce au fait que IE a décidé de faire les choses différemment de la norme. Pour surmonter ce problème, vous devez utiliser un framework JavaScript comme jQuery , YUI , Dojo , MooTools , ExtJS ou Fermeture . Ces cadres aplanir les différences que vous aurez (presque) jamais à faire face aux différences et des bugs dans les différents navigateurs. Il est un grand article sur CodingHorror expliquant pourquoi vous devriez envisager d'utiliser un framework JavaScript si vous prévoyez d'utiliser JavaScript dans votre site que vous devriez lire si vous êtes curieux de pourquoi vous devez utiliser un framework JavaScript.

En outre, si vous n'êtes pas familier avec les événements de navigateur entièrement, assurez-vous de comprendre la différence entre onchange et onblur .

Answer 2

Je crois qu'il n'y a plus de problème avec ces deux événements spécifiques que tous les événements dans Internet Explorer ainsi que les bizarreries étranges habituels tels que celui-ci .

La solution générale à la gestion des événements et de nombreux autres problèmes est d'utiliser un framework Javascript dont les développeurs ont saigné leur propre sang pour sauver la vôtre, dissimulant tous les IE (et quelques autres) bizarreries, comme dojo. Comme les gens disent Dojo sur cette page:

  

Le mot « soutien » signifie quelque chose   très spécifique pour Dojo et Dijit, en   que dire que Dojo de base et Dijit   soutenir un navigateur signifie que 100% de   le fonctionnement des fonctionnalités disponibles,   que l'accessibilité est manipulé   correctement, et que tous les   internationalisation et de localisation   est pris en charge. Ceci est un très haute   bar, ce qui signifie aussi que si nous   ne peut pas dire que les navigateurs comme   Opera sont « pris en charge » pour Dijit, il est   fort probable que ce sera tout le travail   là aussi, mais il peut y avoir un certain   mise en garde que nous n'avons pas pu travailler   environ (tel que le crochet d'accessibilité sur   Opera).

Les navigateurs qu'ils revendiquent comme « pris en charge » à ce niveau très haut bar sont (au Dojo 1.3.2) IE 6 à 8, Safari 3.1 à 4, Firefox 2 à 3,5, Chrome 1 à 2 (la fonctionnalité de base , y compris la gestion des événements, travaille également sur Opera, Konqueror, FF 1.5, ...).

Answer 3

Si vous utilisez jQuery, essayez ceci:

$('input.text').click(function () {
        if (this.value == this.defaultValue) {
            this.value = '';
        }
    });
    $('input.text').blur(function () {
        if (this.value === '') {
            this.value = this.defaultValue;
        }
    });

$("input:text") si vous souhaitez cibler tous les champs de saisie de texte.