Apprendre Javascript pour rendre vos pages Web interactives
Leçon 12: Exercice - Contrôle de saisie en Javascript
Toutes les leçons 
Apprendre Javascript pour rendre vos pages Web interactives
Leçon 12
Exercice - Contrôle de saisie en Javascript
Exercice - Contrôle de saisie en Javascript
Exercice sur les chaînes de caractères
Contrôle de nombre de caractères
Vous avez probablement envoyé un SMS gratuitement depuis le site Web de votre opérateur mobile, où postulé votre site Web à un annuaire de recherche en vue d'en acquérir un back-link. Si c'est le cas, alors vous avez certainement compris l'objectif de l'exercice.Nous voulons créer un une zone de texte (ou espace de texte) pour que l’internaute puisse y saisir un texte quelconque. On suppose que celui ci ne doit pas contenir plus de 60 caractères. Pour que l'internaute ne soit pas surpris par le refus de son post suite à un excès de caractères, nous allons prévoir une zone de texte en bas du textarea qui affiche le nombre de caractères restants. Ce nombre sera automatiquement calculé à chaque modification du texte par le clavier (pour simplifier l'exercice, nous n'allons pas traiter le cas où l'internaute fait un copier-coller dans la zone de saisie).
Si la taille du texte saisi dépasse la longueur maximale spécifiée, alors un message alert() s'affiche pour signaler à l'internaute l'excès de caractères, en plus, tout ce qui dépasse est automatiquement supprimé pour ne conserver que les 60 premiers caractères autorisés.
Pour avoir une idée plus claire sur ce qu'on doit faire, voici un exemple:
Dans cet exemple, je me suis contenté d'un maximum de 30 caractères pour stopper la saisie.
Solution
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
max=60;
function saisie(){
if(document.fo.sms.value.length>max){
alert("Vous avez dépassé "+max+" caractères!");
document.fo.sms.value=document.fo.sms.value.substring(0,max);
}
document.fo.restant.value=max-document.fo.sms.value.length;
}
function init(){
document.fo.sms.value="";
document.fo.sms.focus();
saisie();
}
</script>
</head>
<body onLoad="init()">
<form name="fo">
<input type="text" size="70" name="sms" onKeyUp="saisie()">
<br />
<input type="text" name="restant" size="3" readonly>
caractère(s) restant(s).
</form>
</body>
</html>
Des explications s'imposent. En fait, vous avez encore remarqué la fonction init() appelée au chargement de la page. Elle sert à exécuter certaines opérations au tout début, avant même que l'internaute ne commence à saisir. Elle permet de vider l'espace (ou zone) de texte, activer le champs de saisie pour que le curseur y soit placé directement, et en fin, appeler la fonction saisie() qui affichera dans la zone de texte le nombre de caractères restants.
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript">
max=60;
function saisie(){
if(document.fo.sms.value.length>max){
alert("Vous avez dépassé "+max+" caractères!");
document.fo.sms.value=document.fo.sms.value.substring(0,max);
}
document.fo.restant.value=max-document.fo.sms.value.length;
}
function init(){
document.fo.sms.value="";
document.fo.sms.focus();
saisie();
}
</script>
</head>
<body onLoad="init()">
<form name="fo">
<input type="text" size="70" name="sms" onKeyUp="saisie()">
<br />
<input type="text" name="restant" size="3" readonly>
caractère(s) restant(s).
</form>
</body>
</html>
Concernant le nombre maximal de caractères à ne pas dépasser, je l'ai déclaré en tant que variable max à laquelle j'ai affecté la valeur 60. De cette manière on peut autoriser plus ou moins de caractères en changeant seulement la valeur de cette variable.
L’événement qui appelle la fonction saisie() sera évidemment associé au clavier. J'ai opté pour onKeyUp. Comme ça, la fonction ne s'exécutera qu'après que l'utilisateur aie relâché la touche.
Vous avez peut être remarqué l'attribut HTML readonly sur la zone de texte qui affiche le compteur. Cet attribut empêche toute modification du texte directement dans la zone sur laquelle il est appliqué. Il s'agit d'un attribut booléen dans la valeur vaut implicitement true.
Leçon 12
Exercice - Contrôle de saisie en Javascript
Exercice - Contrôle de saisie en Javascript
