Travailler avec un textarea en JavaScript
#1 Introduction
Pour faire ce tutoriel des connaissances HTML sur les formulaires et les champs de formulaires sont nécessaires. Si vous avez besoin, vous avez un tutoriel dans la partie HTML-CSS de ce site ici. De plus si vous avez fait les tutoriels JAVASCRIPT sur le DOM cette partie devrait vous paraître assez facile.
#2 Le champ de saisie de type textarea
- Prenez Sublime Text et créez un fichier
textarea.html
sur votre bureau. - Tapez
!>(form>textarea)+script
+TAB
. - Ajouter "Bonjour à tous" entre les balises ouvrantes et fermantes de l'élément
textarea
.
- En JavaScript, récupérez l'élément avec un
querySelector()
. - Faites un
console.log()
de la propriétévalue
pour lire le contenu dutextarea
.
- On va commencer par lire la taille par défaut du
textarea
en nombre de caractères. Pour ça faites unconsole.log()
des propriétéscols
etrows
. - Changez ces valeurs en affectant
80
àcols
et10
àrows
. Vérifiez le redimensionnement de l'élément.
- Vous avez la possibilité de modifier la taille de l'élément en travaillant sur la propriété CSS
width
. Attention pour cela vous devez accéder en premier à la propriété JavaScriptstyle
qui est l'équivalent de l'attribut HTMLstyle
. (Voir tutoriels sur le DOM)
- Avec la souris, prenez "la poignée" pour changer la taille l'élément (En bas à droite de l'élément) et changez la taille. Par défaut l'élément est redimensionnable. Vous pouvez changer cela. Mettez la propriété
resize
à la valeur'none'
. - Vous constatez que la poignée disparaît. Donc vous ne pouvez plus redimensionner manuellement.
- Mettez la valeur
'horizontal'
pour autoriser un redimensionnement dans le sens horizontal puis la valeur'vertical'
pour autoriser un redimensionnement dans le sens vertical.
- Changez le "Bonjour à tous" en "Bonjour à touti". Le touti doit être souligné en rouge pour indiquer la faute d'orthographe.
- Supprimez la détection en mettant la propriété
spellcheck
àfalse
. - Vérifiez que la détection disparaît.
- Lorsque le texte arrive en fin de ligne, par défaut une nouvelle ligne est créée. Vous pouvez changer ce comportement en mettant la valeur
'off'
à la propriétéwrap
.
On va terminer en faisant un exemple dans lequel on va limiter le nombre de caractères contenus dans le textarea
. Pour cela on va mettre en place un gestionnaire d'événement avec addEventListener()
.
- Appelez la méthode
addEventlistener()
sur l'événementkeyup
et limitez le nombre de caractères à 5 en utilisant la méthodesubstring()
.