Formulaires & JavaScript
Les zones de texte
• Une zone de texte permet à l'utilisateur de saisir du texte sur une ou plusieurs lignes. Une zone
monoligne correspond à la balise HTML<input type="text">. Une zone multiligne est définie
grâce à la balise<textarea>.
• Accès à la valeur saisie
• En JavaScript, on accède à la valeur d'une zone de texte en utilisant la propriété value de
l'élément du DOM correspond. En donnant une nouvelle valeur à cette propriété, on modifie la
valeur affichée dans la zone de texte.
• Gestion du focus
• Lorsqu'une zone de texte est la cible de saisie, on dit que cette zone possède le focus.
• L'utilisateur d'un formulaire qui clique sur une zone de saisie pour y taper une information déclenche
l'apparition d'un événement de type focus. Inversement, le changement de cible de saisie
provoque l'apparition d'un événement de type blur sur l'ancienne zone qui avait le focus.
Evénements focus et blur
• Lorsqu'une zone de texte est la cible de saisie, on dit que cette
zone possède le focus.
• L'utilisateur d'un formulaire qui clique sur une zone de saisie
pour y taper une information déclenche l'apparition d'un
événement de type focus.
• Inversement, le changement de cible de saisie provoque
l'apparition d'un événement de type blur sur l'ancienne zone
qui avait le focus.
Gestion de l’événement focus et blur
(exemple)
En cliquant dans la zone de saisie du pseudo, vous obtenez l'affichage d'un message informatif dans la
balise<span> prévue à cet effet et initialement vide.
pseudoElt.addEventListener("focus", function () {
document.getElementById("aidePseudo").textContent = "Entrez votre pseudo";
});
// Suppression du message contextuel pour la saisie du pseudo
pseudoElt.addEventListener("blur", function (e) {
document.getElementById("aidePseudo").textContent = "";
});
•
Les éléments d'options
• Ces éléments permettent à l'utilisateur de faire un choix parmi plusieurs
possibilités. Ils ont en commun de déclencher un événement de
type change lorsque l'utilisateur modifie son choix.
• Lorsque la case à cocher change de valeur l’événement change a lieu.
• l'objet Event associé à l'événement dispose d'une propriété booléenne
checked qui indique le nouvel état de la case (cochée/décochée).
// Affichage de la demande de confirmation d'inscription
document.getElementById("confirmation").addEventListener("change", function (e)
{
console.log("Demande de confirmation : " + e.target.checked);
});
