Fil d'ariane : DaWeed.info » javascript, 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, javascript | lu 4545 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
PLAIN TEXT
CSS:
  1. .styleBlur {
  2. color:#515151;
  3. border:1px solid #515151;
  4. background-color:#F1F1F1;
  5. }
  6.  
  7. .styleFocus {
  8. color:red;
  9. border:1px solid red;
  10. background-color:#FFFFFF;
  11. }

    2- Attacher le fichier javascript dans le head de la page
PLAIN TEXT
JAVASCRIPT:
  1. <script src="fonctions_input.js" type="text/javascript"></script>;

    3- appliquer une classe aux champs textes que l'on souhaite "custumiser"
PLAIN TEXT
JAVASCRIPT:
  1. <input class="custumInput" value="ma valeur Initiale" type="text" />

      4- paramétrer l'objet custumInput
PLAIN TEXT
JAVASCRIPT:
  1. var MC_Input    =    new Custum_Input("custumInput","styleBlur","styleFocus");

    Télécharger les sources de custumInput

Commentaires

1

Le 2 septembre 2007 à 9:14, par excargot

alors je vois que ça avance tout ça…

2

Le 2 septembre 2007 à 9:57, par Clem

Sympa tout ça. On peux pas se demmerder autrement qu’avec du javascript, genre le :focus en css même si il n’est pas compatible avec Ie6 et 7 ?

3

Le 2 septembre 2007 à 10:55, par daweed

pour Clem:
Bah en css tu gere pas l’initialisation du contenu..

Pour excargot
oui oui, la suite arrive. la je bloque encore sur le select, mais c’est pour bientot

4

Le 4 septembre 2007 à 8:44, par LutinCapuche

Sympa ! Je viens de tester ta classe, ca marche bien, c’est facile à utiliser… berf, merci !(toto)