Changement du style des zones de texte pendant la focalisation

Soyez le premier à donner votre avis sur cette source.

Snippet vu 8 546 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

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
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.
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
38
NON ça ne passe pas sous Konqueror ni osus Mozilla !!!
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
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)
Afficher les 12 commentaires

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.