Formatage d'une valeur par défaut d'un champ de type text

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