Discussion :

[hotline]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 )

Merci de votre aide

[Bovino]

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
        }
    }
});

[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

[Bovino]

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

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...

[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 ...

[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 ?

[Bovino]

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 !