Travailler avec un textarea en JavaScript

#1 Introduction open

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 open

  1. Prenez Sublime Text et créez un fichier textarea.html sur votre bureau.
  2. Tapez !>(form>textarea)+script + TAB.
  3. Ajouter "Bonjour à tous" entre les balises ouvrantes et fermantes de l'élément textarea.
Tester le code
  1. En JavaScript, récupérez l'élément avec un querySelector().
  2. Faites un console.log() de la propriété value pour lire le contenu du textarea.
Tester le code
  1. On va commencer par lire la taille par défaut du textarea en nombre de caractères. Pour ça faites un console.log() des propriétés cols et rows.
  2. Changez ces valeurs en affectant 80 à cols et 10 à rows. Vérifiez le redimensionnement de l'élément.
Tester le code
  1. 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é JavaScript style qui est l'équivalent de l'attribut HTML style. (Voir tutoriels sur le DOM)
Tester le code
  1. 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'.
  2. Vous constatez que la poignée disparaît. Donc vous ne pouvez plus redimensionner manuellement.
  3. Mettez la valeur 'horizontal' pour autoriser un redimensionnement dans le sens horizontal puis la valeur 'vertical' pour autoriser un redimensionnement dans le sens vertical.
Tester le code
  1. Changez le "Bonjour à tous" en "Bonjour à touti". Le touti doit être souligné en rouge pour indiquer la faute d'orthographe.
  2. Supprimez la détection en mettant la propriété spellcheck à false.
  3. Vérifiez que la détection disparaît.
Tester le code
  1. 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.
Tester le code

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().

  1. Appelez la méthode addEventlistener() sur l'événement keyup et limitez le nombre de caractères à 5 en utilisant la méthode substring().
Tester le code

Politique de confidentialité

Mentions Légales