close

Travailler avec un champ de type text 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 Exemple de manipulations d'un input de type text en JavaScript open

  1. Prenez Sublime Text et créez un fichier text.html sur votre bureau.
  2. Tapez !>(form>input)+script + TAB.
  3. Mettre un peu de style pour centrer le contenu du body et mettre une marge.
  4. Ajoutez l'attribut value et donnez lui la valeur Bonjour.
  5. Faites un Open in browser et constatez que la chaine de caractères de l'attribut HTML value est la chaîne qui est affichée dans le champ de type Text.
Tester le code
  1. Maintenant avec JavaScript vous allez accéder à cette chaine qui est contenue dans le champ de type Text. Pour ça vous devez d'abord accéder à l'élément input par exemple au moyen de la méthode querySelector().
  2. Vous retrouvez cette chaine en JavaScript cette fois ci avec la propriété value et vous faites un console.log() de manière à l'afficher dans la console.
Tester le code
  1. Vous allez affecter une autre valeur à value, par exemple 'Au revoir'. Vous sauvegadez et vous constatez le changement de la valeur affichée dans le champ. Ce qui se passe ici c'est que le JavaScript s'exécute après le HTML pour changer la valeur de value.
Tester le code
  1. Maintenant vous allez regarder quelle est la taille en nombre de caractères de l'input de type text. Etant donné que rien n'a été précisé ni en HTML ni en JavaScript c'est une valeur par défaut. Il s'agit du nombre de caractères affichés et par défaut il y en a 20.
  2. Vous pouvez réduire cette taille et en mettre par exemple 10 en affectant la propriété size.
Tester le code
  1. Maintenant vous allez limiter le nombre de caractères que l'opérateur peut saisir. Pour ça vous allez affecter la propriété maxLength par exemple à 3. Enlever le 'Bonjour'.
  2. Et là vous pouvez constater par vous même qu'il vous est impossible de saisir plus de 3 caractères.
Tester le code
  1. Vous pouvez styler la bordure.
Tester le code
  1. Et maintenant vous allez mettre en place deux gestionnaires d'événements. Un sur l'événement focus et un l'autre sur l'événement blur.
  2. Vérifiez par vous même que lorsque vous cliquez dans le champ son background devient gris foncé car il reçoit le focus (événement focus). Puis cliquez en dehors du champ et vous pouvez constater que son background devient gris clair car il perd le focus (événement blur).
Tester le code