begin process at 2012 05 28 12:52:32
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > CHANGEMENT DU STYLE DES ZONES DE TEXTE PENDANT LA FOCALISATION

CHANGEMENT DU STYLE DES ZONES DE TEXTE PENDANT LA FOCALISATION


 Information sur la source

Note :
4,5 / 10 - par 2 personnes
4,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :effet, textbox, style, focus Niveau :Débutant Date de création :01/12/2004 Vu :7 248
Auteur : semetic

Ecrire un message privé
Commentaire sur cette source (12)
Ajouter un commentaire et/ou une note

 Description

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

  • <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> 
<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>



 Sources du même auteur

COMPTEUR À REBOURS SECONDES, MINUTES ET HEURES DHTML(JAVASCR...
UN SEUL ALERT POUR TOUTES LES ERREURS DE VALIDATION D'UN FOR...
UN SEUL ALERT POUR TOUTES LES ERREURS DE VALIDATION D'UN FOR...
ENCHAINEMENT DE MESSAGES EN BOUCLE FASCINANT
UN COMPTEUR DE TEMPS GÉNÉRANT SOMME D'ARGENT CORRESPONDANTE
Toutes les sources de semetic

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

CHANGER LA TAILLE DU TEXTE ET OU DE FEUILLE DE STYLE AVEC EN... par Annadrill
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Source avec Zip Source avec une capture JBLOCKS, EFFET APPARITION DAMIER par genepink
Source avec Zip Source avec une capture TRANSFORMATIONS CSS ANIMÉES CROSS-BROWSER AVEC JQUERY par pysco68
ACCÈS À LA MÉTHODE SETATTRIBUTE('STYLE','') SOUS IE6 par masternico

Commentaires et avis

Commentaire de coucou747 le 01/12/2004 19:55:34 administrateur CS

Perso ça ne fait rien chez moi...

Commentaire de roro06 le 02/12/2004 13:09:28

Si si, ça marche bien.
Tite question : Comment tu fais si tu as 43 champs qui font ça sur ta page et que tu te rend compte que les couleurs choisies sont "à chier"? Tu te refrappe tout ?

Commentaire de comedylyric le 02/12/2004 13:57:15

ça marche bien mais sous Mozill !
Sous IE c'est niet !
Eh oui, il faut faire encore avec IE même si il n'est pas à jour.
y'a encore du monde dessus !

Commentaire de roro06 le 02/12/2004 14:13:19

Ah non, désolé! ça marche très bien sous ie

Commentaire de jjdagadir le 02/12/2004 14:17:52

Oui, çà marche bien sous IE aussi, sauf si le pack 2 interdit certains accès, qu'il faut alors débloquer. C'est peut être gênant pour l'internaute qui ne sait pas si il peut avoir confiance.
Kenavo

Commentaire de comedylyric le 02/12/2004 14:23:57

En effet c'est le spack2 et ses protections.
désolé !
C'est sympa comme effet !

Commentaire de roro06 le 02/12/2004 14:26:58

Décidément, je crois que j'ai bien fait de me passer de ce sacré pack 2.

Réponse à ma question de tout à l'heure :

<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">
<style type="text/css">
<!--
.classOver{
color:Navy;
background-color: #E6DFDF;
font-weight: bold;
border: 2px solid;
}
.classOut{
backgroundColor:;
color:;
fontWeight:'';
borderWidth:1px
}
-->
</style>
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p align="center"><br><font face="Arial"><b>Changer et rétablir 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" class="classOut"
    onFocus="javascript:this.className='classOver'"
    onBlur="javascript:this.className='classOut'">
        </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" class="classOut"
    onFocus="javascript:this.className='classOver'"
    onBlur="javascript:this.className='classOut'">
        </p></td>
    </tr>
    <tr>
      <td width="153" height="30"> <p align="right"><font face="Arial"><span style="font-size:10pt;">etc
          .... </span></font></p></td>
      <td width="223" height="30"><p>&nbsp; </p></td>
    </tr>
  </table>
</form>
<p> </p>
</body>

</html>

Commentaire de leris le 02/12/2004 16:15:53

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)

Commentaire de roro06 le 02/12/2004 17:56:21

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

Commentaire de coucou747 le 02/12/2004 18:27:25 administrateur CS

NON ça ne passe pas sous Konqueror ni osus Mozilla !!!

Commentaire de younes371 le 10/10/2006 14:14:10

meme si y a mnt presque 2 ans,
je te remercie bcp.

Commentaire de yeb215 le 19/04/2007 23:45:14

à noter que la nouvelle version de ce code se trouve ici http://www.javascriptfr.com/codes/CHANGEMENT-STYLE-SUR-FOCUS_15917.aspx

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Focus dans une textBox [ par monaco63 ] Bonjour,J'ai un petit soucis sur une application codé en C#.J'ai une page qui contient une grille (tableau), quand je clique à l'intérieur d'une de me css dynamique [ par lilj ] Bonjour, je cherche une méthode simple pour changer la classe d'un input. Exemple: au début on a un input avec un style, lorsque le focus est activé effet fade in [ par robbox89 ] Bonjour à tous Débutant en Java j'aurai besoin d'aide pour un effet d'affichage Sur ma page web j'ai deux sections La partie de gauche est réservée Afficher / cacher (un seul s'affiche à la fois) [ par charlie101097 ] bonjour, En théorie, c'est d'après moi la bonne partie pour poster. Après avoir épluché le forum sur mon problème, je décide de poster car je n'ai pas getElementById problème (style) [ par arbilus ] Bonjour, pouvez-vous m'expliquer pourquoi cela ne fonctionne pas (l'iframe n'est pas à 1px ) : [code=js] function h1(){ document.getElementById(' probleme avec mon code avec firefox et opera [ par savagestudio ] bonjour (mon clavier et en norvegien, desole [^^sad2]) , J ai u probleme avec mon code , il marche parfaitment avec safari, chrome,IE mais pas avec fi modifier le list-style-Image CSS grace à l'évènement onmouseover [ par celili40 ] J'avoue tout de suite, je n'ai pas encore commencé le cours de javascript et mis à part le livre que j'ai englouti sur la question, je n'ai pas beauco Affichage visionneuse [ par ggodefroid ] Bonjour j'aimerais obtenir l'effet que l'on a quand on clique sur les onglets connexion/déconnexion de ce site j'ai déja la visionneuse qui fonctionne menu onglets style site NVIDIA [ par ju0123456789 ] Bonjour, J'aimerais utiliser un systeme d'onglets similaire à la page d'accueil du site nvidia http://www.nvidia.fr Quand on passe la souris sur un selectionné un élément dans mon select [ par KaiHo ] Bonjour Je me trouve face à un souci qui me semblait simple à résoudre, mais je sèche. En fait, j'ai un élément "select" d'un formulaire qui doit se


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,498 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)