Fil d'ariane : DaWeed.info » javascript » Gérer l’état des champs textes

31 août 2007

Gérer l’état des champs textes

Article publié dans la catégorie javascript | lu 176 fois |

Voici la V1 de la classe javascript CustumInput.

 

Cette classe est permet de modifier le comportement de champs texte a partir de leur classe.
Elle permet de définir une classe Css pour l’état focus et pour l’état blur du champ texte.
Elle vérifie également si la valeur du champs texte a été initialisé et si elle n’est pas vide.

 


Voir un exemple.

 

 

fonctionnalités de la Classe CustumInput:

  • implémente un style CSS a l’état blur du champ texte
  • implemente un style CSS a l’état focus du champ texte
  • vérifie si le contenu du champ texte a été initialisé et sinon, met la valeur initiale au champ texte.

 

 

La Classe CustumInput s’utilise tres simplement:

 

 

1- dans un fichier css, créer les 2 classes Css appliqués au champ texte a l’état focus et blur

[css]

.styleBlur {
color:#515151;
border:1px solid #515151;
background-color:#F1F1F1;
}

.styleFocus {
color:red;
border:1px solid red;
background-color:#FFFFFF;
}
[/css]

 

 

2- Attacher le fichier javascript dans le head de la page
[javascript]
;
[/javascript]

 

 

3- appliquer une classe aux champs textes que l’on souhaite “custumiser”
[javascript]

[/javascript] 

 

 

4- paramétrer l’objet custumInput
[javascript]

var MC_Input = new Custum_Input(”custumInput”,”styleBlur”,”styleFocus”);
[/javascript]

 

 

Télécharger les sources de custumInput

Commentaires