JavaScript : Readonly dynamique
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);" />
4 octobre 2004 à 17:10
It doesn´t work on Internet Explorer 6.0!! :((
6 octobre 2004 à 10:11
si ça marche !
10 novembre 2004 à 14:35
you can use readOnly = true (upper case O)
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
27 août 2005 à 17:07
For the script to work in IE, do this:
Replace:
divObj.setAttribute("readonly","readonly");
By:
divObj.readOnly = true;
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,
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
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 ?
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");
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.