
Manipuler les propriétés readOnly et disabled 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
Point commun et différences entre un champ readonly et un champ disabled
- Prenez Sublime Text et créez un fichier
test.html
sur votre bureau. - Tapez
!>form>input*2
+TAB
. - Sur le premier
input
ajoutez l'attributvalue
et mettez lui la valeurLe readonly
pour que l'on puisse le repérer puis ajoutez l'attributreadonly
. - Sur le deuxième
input
ajoutez l'attributvalue
et mettez lui la valeurLe disabled
pour que l'on puisse le repérer puis ajoutez l'attributdisabled
. - Faites un Open in Browser et vérifiez le point commun et les différences qu'il vous est possible de voir.
- Le point commun c'est que l'internaute ne pourra pas manipuler le champ pour le modifier. Il devra se contenter de l'état dans lequel il se trouve.
- Les différences :
- Il y a une différence au niveau de l'aspect car le champ placé
disabled
est grisé alors que celui placé enreadonly
ne l'est pas. - Le champ placé en
readonly
reçoit le focus alors que celui placé endisabled
ne le reçoit pas. - Le champ placé en
readonly
est transmis au serveur au moment de la soumission du formulaire alors que celui placé endisabled
ne l'est pas. - L'attribut
readonly
ne sert à rien sur un select alors que l'attributdisabled
est opérationnel. Vérifiez ici.
- Il y a une différence au niveau de l'aspect car le champ placé
#3
Comment positionner un champ en readonly ou en disabled en JavaScript
- Sur le premier
input
placez un attributid
avec la valeureltr
. - Sur le deuxième
input
placez un attributid
avec la valeureltd
. - Déclarez une variable
eltr
et faites ungetElementById()
avec la valeureltr
. - Déclarez une variable
eltd
et faites ungetElementById()
avec la valeureltd
. - Positionnez la propriété
readOnly
àfalse
. ATTENTION c'est un O majuscule. - Positionnez la propriété
disabled
àfalse
. - Constatez que les deux attributs sont désactivés.
Qu'est ce qui c'est passé ? Dans un premier temps le HTML a placé les champs en readonly
et disabled
mais le JavaScript, qui est chargé après, a annulé cette action en mettant les deux propriétés à la valeur false
.