Imput case texte avec image qui disparait [Fermé]

Signaler
Messages postés
1809
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
13 mai 2019
-
Theophile76
Messages postés
1809
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
13 mai 2019
-
Bonjour,
j'ai une case imput, j'ai réussi a faire mettre un texte par défaut qui disparait quand on clique sur la case mais je n'arrive pas à faire ceci avec une image.
En fait j'ai une image de font dans ma case si on ecrit on ne voit plus rien du coup, voilà pourquoi je voudrais que cette image disparaisse au clic.
Merci.




2 réponses

Messages postés
1809
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
13 mai 2019
328
http://codingforums.com/showthread.php?t=108159
C'est le même problème, il est peut être mieux expliqué mais je n'ai pas compris la réponse.
Car en fait la technique fonctionne mais pas pour moi car j'ai déjà un backgroud par défaut.
Messages postés
18390
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 mars 2020
4 155
Salut.

Il suffit de créer deux classes CSS : une pour quand le champ est vide, donc avec le background, et une autre, sans background.
Par exemple : .champVide et .champRempli

Et pour le code :
<input
	type="text"
	name="nom"
	value="Texte par défaut"
	class="champVide"
	onfocus="if(this.value == this.defaultValue) { this.className = 'champVide'; this.value = '';}"
	onblur="if(this.value == '') { this.value = this.defaultValue; this.className = 'champVide'; } else { this.className = 'champRempli'; }"
/>
Theophile76
Messages postés
1809
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
13 mai 2019
328
Jai essayé, ça fonctionne mais pas aud début :
Quand je clique dans la case, aucun backgroud, quand je clique hors de la case, le backgroud ce met (jusqu'ici aucun problème donc) mais au chargement de la page il n'y en a pas hors je voudrais qu'il y en ai un.
.defaut { background-image: url("image.png"); }   
.click { background-image: url("none"); }

et dans mon imput :
<INPUT onfocus="if(this.value == this.defaultValue) { this.className = 'click'; this.value = '';}"  
 onblur="if(this.value == '') { this.value = this.defaultValue; this.className = 'defaut'; } else { this.className = 'click'; }" ...>
avion-f16
Messages postés
18390
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 mars 2020
4 155
Tu as sans doute oublié de modifier l'attribut "class".
Theophile76
Messages postés
1809
Date d'inscription
mardi 6 mars 2007
Statut
Membre
Dernière intervention
13 mai 2019
328
merci ça marche ^^ :

Head
.defaut { background-image: url("image.png"); }  
.click { background-image: url("none"); }


Body
<INPUT class="defaut"  
onfocus="if(this.value == this.defaultValue) { this.className = 'click'; this.value = '';}"  
 onblur="if(this.value == '') { this.value = this.defaultValue; this.className = 'defaut'; } else { this.className = 'click'; }" ... >