Travailler avec un champ de type text 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 Exemple de manipulations d'un input de type text en JavaScript
- Prenez Sublime Text et créez un fichier
text.html
sur votre bureau. - Tapez
!>(form>input)+script
+TAB
. - Mettre un peu de style pour centrer le contenu du body et mettre une marge.
- Ajoutez l'attribut
value
et donnez-lui la valeurBonjour
. - 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.
- 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éthodequerySelector()
. - Vous retrouvez cette chaine en JavaScript cette fois-ci avec la propriété
value
et vous faites unconsole.log()
de manière à l'afficher dans la console.
- Vous allez affecter une autre valeur à
value
, par exemple 'Au revoir'. Vous sauvegardez 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 devalue
.
- 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.
- Vous pouvez réduire cette taille et en mettre par exemple 10 en affectant la propriété
size
.
- 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'
. - Et là, vous pouvez constater par vous-même qu'il vous est impossible de saisir plus de 3 caractères.
- Vous pouvez styler la bordure.
- Et maintenant, vous allez mettre en place deux gestionnaires d'événements. Un sur l'événement
focus
, et l'autre sur l'événementblur
. - 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).