Placeholder Password Type [IE]

**Spire_** · 05/07/2012, 21h58

Bonsoir tout le monde !

J'ai un souci avec IE, et oui... IE quand tu nous tiens...

Donc, je fais des placeholder dans mes formulaires, tout fonctionne très bien.
Pour IE j'ai utilisé du code javascript:

add_placeholder.js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function add_placeholder (id, placeholder)
{
	var el = document.getElementById(id);
	el.placeholder = placeholder;
 
    el.onfocus = function ()
    {
		if(this.value == this.placeholder)
		{
			this.value = '';
			el.style.cssText  = '';
		}
    };
 
    el.onblur = function ()
    {
		if(this.value.length == 0)
		{
			this.value = this.placeholder;
			el.style.cssText = 'color: #a9a9a9;';
		}
    };
	el.onblur();
}

Dans mon html je mets les id dont j'ai besoin:

Code :

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

1
2
3
4
add_placeholder('firstname', 'Prénom');
add_placeholder('lastname', 'Nom');
add_placeholder('email', 'Email');
add_placeholder('password', 'Mot de passe');

Tous fonctionne correctement pour IE.

Le seul petit hic, c'est que pour les type="password", les caractères du placeholder sont masqué avec les étoiles.

Ma question est donc, comment faire pour que ce soit écrit "Mot de passe" et non "************" en tant que placeholder ?

Au plaisir de vous lire.

**SpaceFrog** · 06/07/2012, 08h06

passe par un background image
une image de "Mot de passe"
tu supprimes le background image sur le focus et tu le retablis sur le blur si le champs est vide .

**Spire_** · 07/07/2012, 10h40

Merci pour ta réponse,

Du coup j'ai ajouté ceci:

Code :

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

1
2
3
4
5
window.onload = function(){
	el = document.getElementById("password");
	el.type = "text";
	el.attachEvent("onfocus", function(){ el.type = "password";});
}

Et ça fonctionne avec un petit bug après avoir cliqué dans le champs password (onfocus) puis si l'on déselectionne, ça se retransforme en "*".

Tu as une idée avec ce code là ?

**SpaceFrog** · 07/07/2012, 12h46

Oui

je vois donc que tu as suivi mes conseils

Si je te propose de mettre une image en background, c'est justement pour ne pas avoir à bidouiller avec le changement de type du champs ...

**Spire_** · 07/07/2012, 12h58

^^'

Le problème c'est que je ne vois pas comment faire cela.

**Bovino** · 07/07/2012, 14h59

Donc si on résume, tu sais faire

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function add_placeholder (id, placeholder)
{
	var el = document.getElementById(id);
	el.placeholder = placeholder;
 
    el.onfocus = function ()
    {
		if(this.value == this.placeholder)
		{
			this.value = '';
			el.style.cssText  = '';
		}
    };
 
    el.onblur = function ()
    {
		if(this.value.length == 0)
		{
			this.value = this.placeholder;
			el.style.cssText = 'color: #a9a9a9;';
		}
    };
	el.onblur();
}