|
|
 |
| |
 |
Vous êtes ici : Tutoriels |
|
| |
Tutoriels
|
 Javascript / Trucs et astuces...
Quelques trucs & astuces
Cette page montre de nombreuses astuces pour rendre un formulaire dynamique et attractif, en réaction aux événements générés par l'utilisateur.
Il est nécessaire de bien connaître le principe des formulaires HTML pour tirer partie de ces astuces.
Au sommaire :
1 - Donner le focus (curseur) à un élément de formulaire
Le premier champ texte a le focus au chargement de la page.
Cliquez sur les boutons pour donner le focus aux autres éléments. La prise de focus est possible pour tous les types d'objets.
Le script
<FORM name="form1">
<INPUT type="texte" name="champ1">
<INPUT type="button" value="<- Donne le focus" onClick="this.form.champ1.focus()">
<SELECT name="champ2" >
<OPTION>Ceci est la ligne n° 1</OPTION>
<OPTION>Ceci est la ligne n° 2</OPTION>
</SELECT>
<INPUT type="button" value="<- Donne le focus" onClick="this.form.champ2.focus()">
<TEXTAREA rows="2" cols="15" name="champ3"></TEXTAREA>
<INPUT type="button" value="<- Donne le focus" onClick="this.form.champ3.focus()">
</FORM>
Pour donner le focus à un champ de formulaire à l'ouverture de la page, il faut ajouter cette ligne dans la balise BODY :
onLoad="document.forms['nomduform'].
elements['nomchamp'].focus()"
2 - Changer le libellé d'un bouton
Cliquez le bouton pour changer son libellé.
Le script
<FORM name="form2">
<INPUT type="button" name="bouton" value='Cliquez-moi !' onClick="this.value='Touché !'">
</FORM>
3 - Ne permettre qu'un seul clic sur un bouton
Accepte le premier clic sur le bouton et empêche les suivants.
Utile pour éviter de recevoir 3 fois le même message quand un visiteur s'excite sur le bouton "Envoyer" !
Le script :
Dans l'entête de la page
<SCRIPT language="javascript">
var nbclic=0 // Initialisation à 0 du nombre de clic
function CompteClic(formulaire) { // Fonction appelée par le bouton
nbclic++; // nbclic+1
if (nbclic>1) { // Plus de 1 clic
alert("Vous avez déjà cliqué ce bouton.\nLe formulaire est en cours de traitement... Patience");
} else { // 1 seul clic
alert("Premier Clic.");
}
}
</SCRIPT>
Dans le corps
<FORM name="form3">
<INPUT type="button" name="bouton" value="Cliquez-moi aussi !" onClick="CompteClic(this.form)">
</FORM>
4 - Valider un formulaire par JavaScript
Il est souvent utile de vérifier la saisie d'un formulaire avant de le valider.
L'idéal est de créer un bouton (de type "button" et pas "submit") qui appelle une fonction javascript qui contrôle la saisie et soumet ou non le formulaire.
Voyons un exemple simple de test de saisie d'un email.
Le script
Dans l'entête de la page
<SCRIPT language="javascript">
function ValiderMail(formulaire) {
if (formulaire.mail.value.indexOf("@",0)<0) {alert("Adresse mail saisie invalide.\nLe formulaire ne sera pas validé.")}
else {
alert("Formulaire validé.\nPour valider un formulaire : formulaire.submit()");
// Pour valider le formulaire en javascript :
// formulaire.submit()
}
}
</SCRIPT>
Dans le corps de la page
<FORM name="form4" action="">
Saisissez une adresse mail valide (du type nom@domaine.com)
;<INPUT type="texte" name="mail">
<INPUT type="button" name="bouton" value="Valider" onClick="ValiderMail(this.form)">
</FORM>
5 - Vider un champ à la prise de focus
Par exemple, un champ de saisie de login avec à l'origine "Votre login".
Si vous cliquez sur le champ, "Votre login" disparaît.
Le script
<FORM name="form5">
<INPUT type="texte" name="login" value='Votre login' onFocus="if (this.value=='Votre login') {this.value=''}">
</FORM>
6 - Détecter la touche [Entrée] sur un formulaire
Utile dans les formulaires de recherche, où la plupart des utilisateurs tapent [Entrée] pour valider la recherche, sans cliquer sur le bouton "Rechercher".
L'appui sur [Entrée] déclenche la soumission du formulaire qu'il est possible de détecter avec l'événement onSubmit.
La balise FORM peut donc s'écrire :
<FORM name="formulaire" onSubmit="maFonction()">
<script language="javascript">
function VerifierEntree(formulaire) {
alert("Le submit sur le formulaire a été détecté")
// empeche la soumission du formulaire
// On peut imaginer derriere ce traitement un test de saisie sur le mot
// return false; en cas d'erreur.
// return true; pour envoyer le formulaire au serveur.
}
</script>
Le script:
<SCRIPT language="javascript">
function Deplacer(l1,l2) {
if (l1.options.selectedIndex>=0) {
o=new Option(l1.options[l1.options.selectedIndex]
.text,l1.options[l1.options.selectedIndex].value);
l2.options[l2.options.length]=o;
l1.options[l1.options.selectedIndex]=null; }else{
alert("Aucune activité sélectionnée");
}
}
</SCRIPT>
<INPUT type="button" value="Ajouter >>>" onClick="Deplacer(this.form.liste1,this.form.liste2)">
<INPUT type="button" value=">>> Enlever" onClick="Deplacer(this.form.liste2,this.form.liste1)" >
Le script:
<SCRIPT language="javascript">
function GoClignoter() {
var delai1=500; // temps d'affichage du texte exprimé en millisecondes (ici 0.5 seconde)
var delai2=200; // temps d'affichage du bouton vide
var texte="TEXTE CLIGNOTANT"; // Texte à afficher
var bouton=document.form10.clignoter; // ici on récupère le bouton concerné
if (bouton.value=="") {
bouton.value=texte;
delai=delai1;
} else {
bouton.value="";
delai=delai2;
}
setTimeout("GoClignoter()",delai);
}
</SCRIPT>
<INPUT type="button" name="clignoter" style="width:150px" value="Texte du bouton" onClick="alert('Bouton inactif dans cet exemple')">
<INPUT type="button" value="Cliquez pour démarrer le clignotement" onClick="GoClignoter()"> |
Retour au Tutoriel
|
|
|
|
|
|
|
