close

Manipuler les propriétés readOnly et disabled 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 Point commun et différences entre un champ readonly et un champ disabled open

  1. Prenez Sublime Text et créez un fichier test.html sur votre bureau.
  2. Tapez !>form>input*2 + TAB.
  3. Sur le premier input, ajoutez l'attribut value et mettez-lui la valeur Le readonly pour que l'on puisse le repérer, puis ajoutez l'attribut readonly.
  4. Sur le deuxième input, ajoutez l'attribut value et mettez-lui la valeur Le disabled pour que l'on puisse le repérer, puis ajoutez l'attribut disabled.
  5. Faites un Open in Browser et vérifiez le point commun et les différences qu'il vous est possible de voir.
  6. 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.
  7. 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é en readonly ne l'est pas.
    • Le champ placé en readonly reçoit le focus, alors que celui placé en disabled 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é en disabled ne l'est pas.
    • L'attribut readonly ne sert à rien sur un select, alors que l'attribut disabled est opérationnel. Vérifiez ici.
Tester le code

#3 Comment positionner un champ en readonly ou en disabled en JavaScript open

  1. Sur le premier input, placez un attribut id avec la valeur eltr.
  2. Sur le deuxième input, placez un attribut id avec la valeur eltd.
  3. Déclarez une variable eltr et faites un getElementById() avec la valeur eltr.
  4. Déclarez une variable eltd et faites un getElementById() avec la valeur eltd.
  5. Positionnez la propriété readOnly à false. ATTENTION c'est un O majuscule.
  6. Positionnez la propriété disabled à false.
  7. 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.

Tester le code