Equivalent à DOMAutoComplete pour IE 7

Version imprimable

07/12/2012, 18h30
hotline

Equivalent à DOMAutoComplete pour IE 7
Bonjour,

Dans un formulaire de login, je simule l'attribut placeholder avec des div que je superpose à mes champs input.
Aucun problème, si l'utilisateur saisie lui-même son login et son mot de passe par contre ça se complique si le formulaire est rempli automatiquement par le navigateur.
Pour firefox, je peux utiliser DOMAutoComplete :
Code:

1 2 3 4 $(document).bind('DOMAutoComplete',function(e){ ... // hide placeholder });
mais je ne trouve pas de solution pour IE 7

(pour info, il s'agit d'une appli intranet et IE7 est le navigateur installé par défaut sur tous les postes :cry:)

Merci de votre aide

Citation:

je simule l'attribut placeholder avec des div que je superpose à mes champs input.

8O

C'est pas comme ça qu'on simule un placeholder...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$('input').on({
    focus: function(){
        if(this.value == this.defaultValue){
            this.value = '';
        }
    },
    blur: function(){
        if(this.value == ''){
            this.value = this.defaultValue;
        }
    }
});

07/12/2012, 21h26
SylvainPV

En fait Bovino il existe plusieurs façons de simuler un placeholder. Celle que tu as cité est la plus utilisée, mais en voilà une autre qui ressemble plus à celle de hotline:
https://github.com/jackfranklin/HTML...eholder-fix.js

Je ne sais pas si IE7 déclenche un évènement précis après autocomplétion. Mais il y a peut-être d'autres solutions :
- voir si l'autocomplétion déclenche un onchange
- binder au window.onload
07/12/2012, 21h39
Bovino

Oui, il y a plusieurs façons de simuler un placeholder, mais je n'ai jamais vu d'exemple

Citation:

avec des div que je superpose à mes champs input.

Pour ce qui est de l'événement DOMAutoComplete (qui est spécifiques aux add-ons FF...), je vois pas en quoi il peut avoir un rapport avec le fonctionnement d'un placeholder... :koi:
08/12/2012, 07h53
hotline

Merci pour vos réponses.

Pour expliquer un peu mon raisonnement, j'ai lu que l'on pouvait simuler un placeholder avec un label que l'on positionne en absolute sur le champ, donc je me suis dis que plutôt que d'utiliser un label en "display:inline-block" une div ferait l'affaire.
L'avantage que je vois à cette méthode par rapport à celle rappelée par BOVINO est que sur un champ de type password, j'ai bien du texte et non pas des étoiles (mais il y a peut-être une solution pour éviter ça).

Mais là ou je rencontre un problème c'est lorsque le login et le mot de passe sont enregistrés et restitués par le navigateur (autocomplete). Ils sont alors superposés aux placeholder. En capturant DOMAutocomplete, je cache mes faux placeholder lorsque FF remplit automatiquement les champs mais je n'ai pas de solution pour un autocomplete par IE. Onchange ne marche pas, j'ai également essayé avec un bind 'paste', qui ne marche pas non plus... Reste la solution du timer qui vérifie à chaque seconde si les valeurs des champs ont été modifiés mais j'aurai préféré une solution plus simple ...
08/12/2012, 16h47
SylvainPV

C'est pour ça que dans la solution que je t'ai mise en lien, il utilise un input plutôt qu'un div pour éviter d'avoir l'effet de superposition. Sinon tu peux mettre un background-color:white; à ton div placeholder.
Mais pour cacher le placeholder en cas d'autocomplétion, je crois qu'il vaut mieux utiliser la solution de Bovino avec l'attribut value de ton input. Tu auras des points avec les type=password, mais bon a-t-on vraiment besoin d'un placeholder pour un champ mot de passe, qui par définition ne répond à aucun format prédéfini ?
08/12/2012, 18h45
Bovino

Citation:

mais bon a-t-on vraiment besoin d'un placeholder pour un champ mot de passe, qui par définition ne répond à aucun format prédéfini ?

Entièrement d'accord.
Il ne faut pas confondre le rôle du placeholder (par exemple préciser un format attendu) et celui du label !
09/12/2012, 09h48
hotline

Effectivement,

Citation:

Il ne faut pas confondre le rôle du placeholder (par exemple préciser un format attendu) et celui du label !

mais pour revenir à un cas plus général, j'ai réussi à faire ce que je voulais en utilisant onpropertychange

Citation:

To determine when a user updates the content of a field from the AutoComplete dialog box, use the onpropertychange event, rather than the onchange event, because the onchange event does not fire.

MSDN