Changement du style des zones de texte pendant la focalisation

Soyez le premier à donner votre avis sur cette source.

Snippet vu 8 460 fois - Téléchargée 33 fois

Contenu du snippet

Ce simple code javascript inséré en HTML permet le changement du style (couleur et la taille de la police la taille de la bordure ainsi que la couleur de l'arrière-plan de cette zone) quand elle reçoit la focalisation pour savoir ou on est dans le formulaire.

Qaund on passe à une autre zone du formulaire la première retrouve son style d'origine pour une autre en focalisation et ainsi de suite..

C'est simple beau et pratique, non?

E-mail: sidoummoudz@yahoo.fr

Source / Exemple :


<html>

<head>
<title>Changer et rétablir le style des zones de texte par les évènements onFocus onBlur</title>
<meta name="generator" content="Namo WebEditor v5.0">
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="center"><br><font face="Arial"><b>Changer et rétablir&nbsp;le style 
des zones de texte par les évènements onFocus onBlur<br>

</b></font><p align="center"><br>
</p>
<form name="form5">
    <table cellpadding="0" cellspacing="0" width="392">
        <tr>
            <td width="153" height="30">
                <p align="right"><font face="Arial"><span style="font-size:10pt;">Nom</span></font></p>
            </td>
            <td width="223" height="30">    <p><input type="text" name="formtext1" size="30" style="border-width:1px; border-color:black"
    onFocus="javascript:this.style.backgroundColor='#E6DFDF';this.style.color='Navy';this.style.fontWeight='bold';this.style.borderWidth='2px'" 
    onBlur="javascript:this.style.backgroundColor='';this.style.color='';this.style.fontWeight='';this.style.borderWidth='1px'"></p>
            </td>
        </tr>
        <tr>
            <td width="153" height="30">
                <p align="right"><font face="Arial"><span style="font-size:10pt;">Prénom</span></font></p>
            </td>
            <td width="223" height="30">    <p><input type="text" name="formtext1" size="30" style="border-width:1px; border-color:black"
    onFocus="javascript:this.style.backgroundColor='#E6DFDF';this.style.color='Navy';this.style.fontWeight='bold';this.style.borderWidth='2px'" 
    onBlur="javascript:this.style.backgroundColor='';this.style.color='';this.style.fontWeight='';this.style.borderWidth='1px'"></p>
            </td>
        </tr>
        <tr>
            <td width="153" height="30">
                <p align="right"><font face="Arial"><span style="font-size:10pt;">Adresse</span></font></p>
            </td>
            <td width="223" height="30"><p><input type="text" name="formtext1" size="30" style="border-width:1px; border-color:black"
    onFocus="javascript:this.style.backgroundColor='#E6DFDF';this.style.color='Navy';this.style.fontWeight='bold';this.style.borderWidth='2px'" 
    onBlur="javascript:this.style.backgroundColor='';this.style.color='';this.style.fontWeight='';this.style.borderWidth='1px'"></p>
            </td>
        </tr>
        <tr>
            <td width="153" height="30">
                <p align="right"><font face="Arial"><span style="font-size:10pt;">Tel</span></font></p>
            </td>
            <td width="223" height="30">    <p><input type="text" name="formtext1" size="30" style="border-width:1px; border-color:black"
    onFocus="javascript:this.style.backgroundColor='#E6DFDF';this.style.color='Navy';this.style.fontWeight='bold';this.style.borderWidth='2px'" 
    onBlur="javascript:this.style.backgroundColor='';this.style.color='';this.style.fontWeight='';this.style.borderWidth='1px'"></p>
            </td>
        </tr>
        <tr>
            <td width="153" height="30">
                <p align="right"><font face="Arial"><span style="font-size:10pt;">Email</span></font></p>
            </td>
            <td width="223" height="30">    <p><input type="text" name="formtext1" size="30" style="border-width:1px; border-color:black"
    onFocus="javascript:this.style.backgroundColor='#E6DFDF';this.style.color='Navy';this.style.fontWeight='bold';this.style.borderWidth='2px'" 
    onBlur="javascript:this.style.backgroundColor='';this.style.color='';this.style.fontWeight='';this.style.borderWidth='1px'"></p>
            </td>
        </tr>
        <tr>
            <td width="153" height="30">
                <p align="right"><font face="Arial"><span style="font-size:10pt;">Site 
                Web</span></font></p>
            </td>
            <td width="223" height="30">    <p><input type="text" name="formtext1" size="30" style="border-width:1px; border-color:black"
    onFocus="javascript:this.style.backgroundColor='#E6DFDF';this.style.color='Navy';this.style.fontWeight='bold';this.style.borderWidth='2px'" 
    onBlur="javascript:this.style.backgroundColor='';this.style.color='';this.style.fontWeight='';this.style.borderWidth='1px'"></p>
            </td>
        </tr>
    </table>
</form>
<p>&nbsp;</p>
</body>

</html>

A voir également

Ajouter un commentaire

Commentaires

yeb215
Messages postés
10
Date d'inscription
samedi 26 mars 2005
Statut
Membre
Dernière intervention
23 août 2007
-
à noter que la nouvelle version de ce code se trouve ici http://www.javascriptfr.com/codes/CHANGEMENT-STYLE-SUR-FOCUS_15917.aspx
younes371
Messages postés
505
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012
-
meme si y a mnt presque 2 ans,
je te remercie bcp.
coucou747
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
26 -
NON ça ne passe pas sous Konqueror ni osus Mozilla !!!
cs_roro06
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007
-
Faux !
D'accord pour l'id : il doit etre unique
pour le name, il n'a pas besoin d'être unique.

D'ailleurs le modele DOM accède aux elements par leur id (document.getElementById("id1"), par exemple) ou par leur nom. A ce moment-là, il y accede par un tableau (ex : document.getElementsByName("formtext1")[0], document.getElementsByName("formtext1")[1] etc ...

Très pratique quand ta page est générée par un script et que tu ne sais pas a priori combien d'éléments elle comportera

Sinon tu as raison sur un point : le mot "javascript" est inutile ici
cs_leris
Messages postés
419
Date d'inscription
dimanche 31 août 2003
Statut
Membre
Dernière intervention
19 avril 2010
1 -
code tout kaka !

tableau inutile !

onFocus="javascript:this.style.backgroundColor='#E6DFDF'; incorrect !
onFocus="this.style.backgroundColor='#E6DFDF';

name="formtext1" incorrect ! le name comme l'id doit etre unique ! (exception : boutons radio)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.