Formatage d'une valeur par défaut d'un champ de type text [Résolu]

petit.quent · 30/12/2011, 21h26

Bonjour,

Je suis en train de faire un formulaire, j'ai un champ text avec la valeur par défaut 'Code Postal', comment faire pour que cette valeur par défaut soit en italique et que lorsque l'utilisateur saisie l'information, cette dernière soit de nouveau normal ?

Voici mon champ :

Code :

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

<input type="text" name="CodePostal" id="CodePostal" value="Code Postal" maxlength="5" />

Merci.

Cordialement,

Quentin

Atomya Rise · 31/12/2011, 13h31

Voici ce que je te propose !

Un page italicValueInput.js avec le contenu suivant :

Code javascript :

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
 
$(function() {
	$('input[type=text]').focus(function(i) {
		var val = $(this).val();
		var defaultVal = $(this).attr('title');
		if(val == defaultVal && defaultVal!= "") { $(this).val('').removeClass('inputDefaultVal'); }
	});
	$('input[type=text]').focusout(function(i) {
		var val = $(this).val();
		var defaultVal = $(this).attr('title');
		if(val == '' && defaultVal!= "") { $(this).val(defaultVal).addClass('inputDefaultVal'); }
	});
	$('input[type=text]').each(function(index) {
		var defaultVal = $(this).attr('title');
		var val = $(this).val();
		if(defaultVal!= "" && (val == '' || val == defaultVal )) { $(this).val(defaultVal).addClass('inputDefaultVal'); }
	});
});

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<html>
<head>
<title>Texte en italic dans les inputs de type text</title>
<style type="text/css">.inputDefaultVal { font-style: italic; }</style>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script language="Javascript" src="italicValueInput.js"> </script>
</head>
<body>
<input type="text" name="CodePostal" id="CodePostal" title="Texte par défaut" maxlength="5" />
</body>
</html>

Attention, il te faut automatiquement jQuery pour ce code, que j'ai appelé en ligne 6.

Pour le js, là, je l'ai mis dans une page séparé, mais tu peux très bien l'intégrer directement dans ta page html, tout dépends la façon dont tu t'y prends pour"coder"

Macmillenium · 31/12/2011, 16h49

@Atomya Rise: On peut optimiser encore plus

Code javascript :

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
25
 
var $inputxt = $('input[type=text]');
 
$inputxt.each(function() {
    defaultVal = $(this).attr('title');
 
    $(this).val(defaultVal)
 
    .focus(function(defaultVal) {
        return function() {
            if ($(this).val() == defaultVal) {
                $(this).val('').removeClass('inputDefaultVal')
            }
        }
 
    }(defaultVal))
 
    .focusout(function(defaultVal) {
        return function() {
            if ($(this).val() == "") {
                $(this).val(defaultVal).addClass('inputDefaultVal')
            }
        }
    }(defaultVal))
});

Atomya Rise · 31/12/2011, 19h58

@Macmillenium : Merci, c'est impeccable comme ceci

RomainVALERI · 01/01/2012, 16h53

Je n'ai aucune critique technique à adresser à la solution, qui est fort bien écrite, mais...

...embarquer jQuery pour la mise en forme d'un champ de formulaire ?

...et sans savoir s'il n'utilise pas déjà une (ou plusieurs

) libs ?

Atomya Rise · 01/01/2012, 16h55

@RomainVALERI : si tu as une autre solution, nous sommes preneur

Auteur · 01/01/2012, 17h58

bonjour,

essaye ce bout de code :

Code javascript :

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
25
26
27
28
29
30
31
32
33
 
<script type="text/javascript">
// lorsque le champ a le focus on supprime le contenu et on donne le style normal
// si le champ contient déjà un nombre à 5 chiffres on ne fait rien
function focusIn(obj)
{
	if (!obj.value.match("^[0-9]{5}$"))
	{
		obj.style.fontStyle = "normal";
		obj.value="";
	}
}
 
// lorsque le champ perd le focus, on vérifie que le champ contient 5 chiffres (code postal)
// sinon on écrit la valeur par défaut
function focusOut(obj)
{
	if (!obj.value.match("^[0-9]{5}$"))
	{
		obj.value="Code postal";
		obj.style.fontStyle = "italic";
	}
	/*
	// else pas utile ;)
	else
	{
		obj.style.fontStyle = "normal";
	}
	*/
 
}
 
</script>

Code html :

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

1
2
 
<input type="text" value="Code postal" style="font-style:italic" onfocus="focusIn(this)" onblur="focusOut(this)" />

et sans JQuery

Bovino · 02/01/2012, 08h26

En plus concis :

Code :

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

<input placeholder="Code postal" />

petit.quent · 02/01/2012, 09h44

Merci beaucoup pour toutes ces réponses.

La réponse d'Auteur est très bien !

Cordialement,

Quentin

Atomya Rise · 02/01/2012, 12h20

@Bovino : placeholder est pour html5, ne connaissant pas la version html de petit.quent, nous avons préféré passer autrement... De plus, placeholder n'est pas pour mettre en italique, mais gris clair

Macmillenium · 02/01/2012, 14h14

Citation:

Envoyé par Atomya Rise

De plus, placeholder n'est pas pour mettre en italique, mais gris clair

En fait, il est possible de surcharger la CSS UA pour appliquer un style italique, par exemple sur firefox:

Code :

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

1
2
3
4
 
input:-moz-placeholder {
  font-style:italic;
}

Après, il faut connaitre tous les préfixes vendeurs.

30/12/2011, 21h26	#1
petit.quent Invité régulier Quentin PETIT Étudiant Inscription : décembre 2011 Messages : 18 Détails du profil Informations personnelles : Nom : Quentin PETIT Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Étudiant Secteur : High Tech - Produits et services télécom et Internet Informations forums : Inscription : décembre 2011 Messages : 18 Points : 9 Points : 9	Formatage d'une valeur par défaut d'un champ de type text Bonjour, Je suis en train de faire un formulaire, j'ai un champ text avec la valeur par défaut 'Code Postal', comment faire pour que cette valeur par défaut soit en italique et que lorsque l'utilisateur saisie l'information, cette dernière soit de nouveau normal ? Voici mon champ : Code : Sélectionner tout - Visualiser dans une fenêtre à part <input type="text" name="CodePostal" id="CodePostal" value="Code Postal" maxlength="5" /> Merci. Cordialement, Quentin
	00

31/12/2011, 19h58	#4
Atomya Rise Membre Expert Emilie Lefol En recherche d'emploi Inscription : février 2009 Messages : 411 Détails du profil Informations personnelles : Nom : Emilie Lefol Âge : 26 Localisation : France, Somme (Picardie) Informations professionnelles : Activité : En recherche d'emploi Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2009 Messages : 411 Points : 1 277 Points : 1 277	@Macmillenium : Merci, c'est impeccable comme ceci __________________ *Si un message vous a aidé, pensez à voter positivement pour lui ! Merci* Pas de question technique en privé - Si on criait sur la place publique les fautes de tout le monde, on ne pourrait plus fréquenter personne ! (Marcel Pagnol) - Technocrates, c’est les mecs que, quand tu leur poses une question, une fois qu’ils ont fini de répondre, tu comprends plus la question que t’as posée. (Coluche)
	10

01/01/2012, 16h53	#5
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 582 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 582 Points : 4 088 Points : 4 088	Je n'ai aucune critique technique à adresser à la solution, qui est fort bien écrite, mais... ...embarquer jQuery pour la mise en forme d'un champ de formulaire ? ...et sans savoir s'il n'utilise pas déjà une (ou plusieurs ) libs ? __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	10

01/01/2012, 16h55	#6
Atomya Rise Membre Expert Emilie Lefol En recherche d'emploi Inscription : février 2009 Messages : 411 Détails du profil Informations personnelles : Nom : Emilie Lefol Âge : 26 Localisation : France, Somme (Picardie) Informations professionnelles : Activité : En recherche d'emploi Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2009 Messages : 411 Points : 1 277 Points : 1 277	@RomainVALERI : si tu as une autre solution, nous sommes preneur __________________ *Si un message vous a aidé, pensez à voter positivement pour lui ! Merci* Pas de question technique en privé - Si on criait sur la place publique les fautes de tout le monde, on ne pourrait plus fréquenter personne ! (Marcel Pagnol) - Technocrates, c’est les mecs que, quand tu leur poses une question, une fois qu’ils ont fini de répondre, tu comprends plus la question que t’as posée. (Coluche)
	00

02/01/2012, 08h26	#8
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	En plus concis : Code : Sélectionner tout - Visualiser dans une fenêtre à part <input placeholder="Code postal" /> __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

02/01/2012, 09h44	#9
petit.quent Invité régulier Quentin PETIT Étudiant Inscription : décembre 2011 Messages : 18 Détails du profil Informations personnelles : Nom : Quentin PETIT Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Étudiant Secteur : High Tech - Produits et services télécom et Internet Informations forums : Inscription : décembre 2011 Messages : 18 Points : 9 Points : 9	Merci beaucoup pour toutes ces réponses. La réponse d'Auteur est très bien ! Cordialement, Quentin
	00

02/01/2012, 12h20	#10
Atomya Rise Membre Expert Emilie Lefol En recherche d'emploi Inscription : février 2009 Messages : 411 Détails du profil Informations personnelles : Nom : Emilie Lefol Âge : 26 Localisation : France, Somme (Picardie) Informations professionnelles : Activité : En recherche d'emploi Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2009 Messages : 411 Points : 1 277 Points : 1 277	@Bovino : placeholder est pour html5, ne connaissant pas la version html de petit.quent, nous avons préféré passer autrement... De plus, placeholder n'est pas pour mettre en italique, mais gris clair __________________ *Si un message vous a aidé, pensez à voter positivement pour lui ! Merci* Pas de question technique en privé - Si on criait sur la place publique les fautes de tout le monde, on ne pourrait plus fréquenter personne ! (Marcel Pagnol) - Technocrates, c’est les mecs que, quand tu leur poses une question, une fois qu’ils ont fini de répondre, tu comprends plus la question que t’as posée. (Coluche)
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email