Introduction
Voici 2 façons d'ajouter des événement en javascript sur des éléments de formulaire, soit OnFocus et OnBlur, ainsi qu'un objet "propriété"... De ces technique peuvent découler plusieurs possibilités plus complex les une que les autres...
Façon #1 (Static)
Ici nous verons la façon "static".
Premièrement créont une page html contenant un formulaire nommé form1.
Ajoutons y quelques éléments :
3 textbox
1 button
1 hidden field (pas vraiment utilisé ici)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test JS</title>
</head>
<body>
<form name="form1">
<div><input type="text" name="toto1" id="toto1" /></div>
<div><input type="text" name="toto2" id="toto2" /></div>
<div><input type="text" name="toto3" id="toto3" /></div>
<div><input type="submit" value="Do Nothing :)" /></div>
<input type="hidden" value="totoX" name="hBox" />
</form>
</body>
</html>
Ajoutons des styles focus et blur :
<style>
.normal
{
border:1px solid #ccc;
}
.focus
{
border:1px solid #000;
}
</style>
Maintenant que nous avons nos styles et notre formulaire, il faut maintenant un object propriété.
Ajoutons lui un propriété qui contient le nom de la class Blur et Focus...
En utilisant le mot clé this, nous ajoutons des propriétés à notre objet myProps. Il est également possible d'ajouter des gestionaires d'événement de la même manière...
<script>
<!--
myProps = function()
{
this.ClassBlur = "normal";
this.ClassFocus = "focus";
}
//-->
</script>
Présentement il nous manque le script qui ajoutera les gestionaires d'événement à nos textbox.
- Créont une function Page_Load() et ajoutons un gestionaire d'événement onload au body qui apellera notre function Page_Load().
Dans Page_Load() :
Premièrement il nous faut une référence à notre objet myProps : var props = new myProps();
Puisque cette partie est "static" utilisons getElementById pour créer des variable référence à nos 3 textbox :
var toto1 = document.getElementById("toto1");
var toto2 = document.getElementById("toto2");
var toto3 = document.getElementById("toto3");
Maintenant passons à l'action :
- il faut attribuer la class css de départ à nos textbox, qui est definie dans la propriété ClassBlur dans notre objet myProps.
Ici puisque notre instance de l'objet myProps est props, nous utilisont la même syntax que dans l'objet lui-même, mais en remplacant this par props...
toto1.className = props.ClassBlur; - Deuxièmement, il faut ajouter nos événement onblur et onfocus. Pour ajouter une événement à un gestionaire d'événement d'un élément HTML, il faut lui attribuer une function, comme suit :
toto1.onfocus = function() {this.className=props.ClassFocus;};
toto1.onblur = function() {this.className=props.ClassBlur;};
- faison la même chose avec les 2 autres textbox... Voici le code complet de PageLoad() :
function Page_Load()
{
var props = new myProps();
var toto1 = document.getElementById("toto1");
var toto2 = document.getElementById("toto2");
var toto3 = document.getElementById("toto3");
toto1.className = props.ClassBlur;
toto1.onfocus = function() {this.className=props.ClassFocus;};
toto1.onblur = function() {this.className=props.ClassBlur;};
toto2.className = props.ClassBlur;
toto2.onfocus = function() {this.className=props.ClassFocus;};
toto2.onblur = function() {this.className=props.ClassBlur;};
toto3.className = props.ClassBlur;
toto3.onfocus = function() {this.className=props.ClassFocus;};
toto3.onblur = function() {this.className=props.ClassBlur;};
}
En essayant la page, ça fait ce que l'on voulais, ca trigger un event onBlur et un autre onFocus et ces événement sont ajouté en JavaScript mais en regardant attentivement la fonction Page_Load, il est évident que nous répétons les même lignes de code inutilement...
var toto1 = document.getElementById("toto1");
toto1.className = props.ClassBlur;
toto1.onfocus = function() {this.className=props.ClassFocus;};
toto1.onblur = function() {this.className=props.ClassBlur;};
Façon #2 (Dynamique)
Maintenant que nous savons les quelques lignes que nous devons garder/modifer allons-y...
Nous allons, ici, réécrire la function Page_Load() pour quel réagisse de la même façon selon le nombre de textbox qu'il y a dans la page. De cette façon nous pourrons gérer des formulaires beaucoup plus grand que celui ci.
Le principe est le même, mais plutôt que d'instancier une variable par textbox, nous allons boucler tous les éléments du formulaire et ajouter à chaque textbox les mêmes propriété/événement que dans l'autre façon, comme suit :
function Page_Load()
{
var props = new myProps();
var myForm = document.getElementById("form1");
for (i=0;i<myForm.elements.length;i++)
{
if (myForm.elements[i].type == "text")
{
myForm.elements[i].className = props.ClassBlur;
myForm.elements[i].onfocus = function() {
this.className=props.ClassFocus;
};
myForm.elements[i].onblur = function() {
this.className=props.ClassBlur;
};
}
}
}
Et voila, le tour est joué grace à elements....
Conclusion
Il est aussi facile sinon plus de programmer de façon "générique", que ce soit pour des petites tâches ou des grandes tâches...
Nous avons aussi remarqué qu'encapsuler les propriété (voir des méthod) dans un objet est très simple et peu ce révéler très pratique. Par exemple nous aurions pu créer une instance global de notre objet myProps et ajouter un dropdown list qui permet de changer les class de notre objet...
Le DOM (Document Object Model) ¸offre des possibilités gradiose, même si nous n'avons fait que le survolé dans l'article présent.
En espérant que mon article c'est révélé interessant.