Changement du style des zones de texte pendant la focalisation

Commenter

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

S'inscrire maintenant

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.

Du même auteur (semetic)