«
»

JavaScript : Readonly dynamique

JavaScript

Contrairement à d'autres attributs de la balise <input> en (X)HTML, l'attribut readonly (qui grise le champ pour l'utilisateur) ne peut être modifié dynamiquement en JavaScript de la manière la plus simple :

objet.readonly=false;

Ceci provient principalement du fait que cet attribut modifie le comportement de la balise par sa seule présence. Dans les premières versions de HTML il suffisait de le placer, sans valeur :

<input type="text" name="nom" value="arf" readonly>

Désormais, en XHTML, il est obligatoire de lui associer une valeur, par défaut readonly :

<input type="text" name="nom" value="arf" readonly="readonly" />

Il faudra donc contourner ce premier réflexe par l'utilisation de removeAttribute, qui va retirer readonly. En ajoutant quelques parades pour le support de JavaScript de plusieurs générations de navigateurs :

function inputenable(id,state) {
 var divObj = null;
  if (document.getElementById) {
  divObj = document.getElementById(id);
 } else if(document.all) {
  divObj = document.all(id);
 } else if (document.layers) {
  divObj = document.layers[id];
 }
 if(state && divObj) {
  divObj.removeAttribute("readonly");
 } else if(divObj) {
  divObj.setAttribute("readonly","readonly");
 }
}

Appelé de la manière suivante :

inputenable(id,false); ou inputenable(id,true);

Où id est l'ID de l'élément dans le document à "readonlyser", et le booléen son état (true : readonly, false : read/write). Par exemple avec une checkbox qui active un textfield :

<input type="text" id="foo" /> <input type="checkbox" onclick="inputenable('foo',this.checked);" />

Cet article a été publié le mardi 28 septembre 2004 à 01:01 et est classé dans Webdesign. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.

10 commentaires pour “JavaScript : Readonly dynamique”

  1. herranzr dit :
    4 octobre 2004 à 17:10

    It doesn´t work on Internet Explorer 6.0!! :((

  2. rico dit :
    6 octobre 2004 à 10:11

    si ça marche !

  3. b dit :
    10 novembre 2004 à 14:35

    you can use readOnly = true (upper case O)

  4. gooners dit :
    15 mars 2005 à 12:29

    merci beaucoup pour ces renseignements très utiles…
    cela m’a évité entre autre de me galèrer une aprem lol

  5. Wizz dit :
    27 août 2005 à 17:07

    For the script to work in IE, do this:

    Replace:
    divObj.setAttribute("readonly","readonly");

    By:
    divObj.readOnly = true;

  6. roro dit :
    17 octobre 2005 à 18:01

    salut,

    pourrais tu me dire comment en activant un checkbox, on puisse afficher un message juste en dessous de la checkbox dynamiquement ?

    merci,

  7. NourTN dit :
    2 mai 2006 à 12:14

    divObj.removeAttribute("readonly");
    //ne fonctionne pas avec IE 6 mais fonctionne avec Firefox 1.5

    divObj.readOnly = false;
    // fonctionne avec IE 6 et Firefox 1.5

  8. Lolo dit :
    14 mai 2007 à 09:54

    Effectivement ca marche sur avec IE 6
    divObj.readOnly = false/true;

    Par contre peut-on me confirmer que ca fonctionne sous IE 5 ?

  9. le king dit :
    1 août 2007 à 20:28

    MOÉ JE L’AI, pas dur de tester avant de poster tabar…..

    IE, FF = HTMLObj.removeAttribute("readOnly");

    IE, FF = HTMLObj.setAttribute("readOnly", "true");

  10. Osiris dit :
    6 novembre 2007 à 09:39

    EN:
    The problem is just the difference between "readonly" and "readOnly" with XHTML and HTML for FF and IE6.

    The solution is to replace "readonly" by "readOnly" which is interpreted by FF1.5+ and IE6+. Not tested on IE5.

    ——————————————————————–
    Solution:
    ——————————————————————–

    divObj.removeAttribute("readOnly");
    } else if(divObj) {
    divObj.setAttribute("readOnly","readonly");

    ——————————————————————–
    FR:
    La solution est de remplacer "readonly" par "readOnly" qui est interprété par FF1.5+ et IE6+. Pas testé sur IE5.

Laisser un commentaire