Newsgroup: it.comp.lang.javascript
Titolo: cambiare il colore del testo diabilitato

Salve,
Sapete per caso se è possibile cambiare il colore del font degli input
disabilitati (invece del grigio, vorrei mettere un altro colore)?
GRAZIE.

 disabilitati (invece del grigio, vorrei mettere un altro colore)?
Si' e' possibile, credo che sia sconsigliabile, comunque si puo' fare...
Come disabiliti il campo? dinamicamente con JS?
Comunque sia lo fai con i CSS prendendo il riferimento del campo e
assegnando il valore...



Con Mozilla, Firefox, Opera basta l'uso dei CSS, IE invece non lo
permette (tanto per cambiare :-))  Con IE sei costretto ad usare
javascript,  per esempio:
<html>
<head>
<style type="text/css">
input{
	color:#a0a0a0;
}
input[disabled]{
	color:#0aff0a;
}
</style>
<script type="text/javascript">
function changecolor(){
 var n=document.forms[0].elements.length;
 var i,el;
 for(i=0;i<n;i++){
	el=document.forms[0].elements[i];
	if(el.tagName=="INPUT" && el.disabled){
		el.style.color="#0aff0a";
	}
 }
}
</script>
</head>
<body onload="if(typeof(document.all)=='object'){changecolor();}">
<form>
<input name="n1" type="text" value="abilitato"/>
<br/>
<input name="n2" disabled value="disabilitato" type="text"/>
</form>
</body>
</html>
Qui il codice Javascript e' eseguito solo se il browser e' IE,
altrimenti basta la definizione nel CSS (input[disabled]).
'bye

 Qui il codice Javascript e' eseguito solo se il browser e' IE,
Uhm, con quale versione di IE l'hai testato?
-- 
C'ya,
  ZER0 :: coder.gfxer.webDesigner();
Deformazione professionale č:
Quando in ascensore senti la ragazza accanto che tira fuori il cellulare,
e ti volti per capire se e' un modello sul quale puoi sviluppare in J2ME.

Uhm, con quale versione di IE l'hai testato?
Argh, IE mi ha fregato ancora. Non l'avevo testato con IE :( il quale
lascia cambiare tutto (fontsize, backgroundcolor, etc [testato questa
volta]) tranne "color". Bah!
Note_to_Self: mai fidarsi di IE (ripetuto 2000 volte)
'bye


-- 
C'ya,
  ZER0 :: coder.gfxer.webDesigner();
Una mente perversa e' un peccato sprecarla.
(A dirty mind is a terrible thing to waste)


Questo l'avevo testato, e l'ho ritestato adesso, funziona.
IE 6.0.2800.1106
'bye

 Questo l'avevo testato, e l'ho ritestato adesso, funziona.
Mi sa' che non l'hai testato a fondo: Ti sei preoccupato di vedere il
codice generato da IE?
-- 
C'ya,
  ZER0 :: coder.gfxer.webDesigner();
Come devo regolare la stampante laser per stordire?
(How do I set a laser printer to stun?)

> Con Mozilla, Firefox, Opera basta l'uso dei CSS
Opera mi sembra che funzioni per meta': il colore del font rimane invariato
e le altre proprieta' volendo cambiano...

 volta]) tranne "color". Bah!
Non e' proprio cosi'!
Facendo un po' di test perche' la cosa mi ha incuriosito, ho tratto le
seguenti conclusioni:
IE6 (e quindi i predecessori) non interpreta questa dichiarazione dei CSS2:
input[disabled] {
...
}
Poi, se avessi messo solo input, allora in quel caso se il campo e'
disattivato, non permette i cambiamenti del colore del testo ma degli altri
attributi si'...

codice generato da IE?
Per essere precisi non genera codice. Aggiunge elementi all'albero
DOM.
Non ho un DOM Inspector per IE, quindi se devo vedere cosa combina IE
lo devo fare da Javascript con qualcosa di simile (scritto in fretta):
====
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">
var s="";
var lt="&lt;"
var gt="&gt;"
function getDOM(sel,t){
 var deep;
 try{
 var hastag=(typeof(sel.tagName)=="string");
 if(hastag){
	s+=t+lt+sel.tagName+gt+"<br>";
 } else {
	s+=t+"["+sel+"]<br>";
 }
 deep=true;
 if(
sel.id
){
	s+=t+"id="+
sel.id
+"<br>";
	if(
sel.id
=="out"){
		deep=false;
	}
 } else {
	flag=false;
 }
 if(
sel.name
){
	s+=t+"name="+
sel.name
+"<br>";
 }
 if(deep){
	var i, n=sel.childNodes.length;
	for(i=0;i<n;i++){
		getDOM(sel.childNodes[i],t+" - -");
	}
 }
 if(hastag){
	s+=t+lt+"/"+sel.tagName+gt+"<br>";
 } else {
	s+=t+sel.nodeValue+"<br>";	
	s+=t+"[/"+sel+"]<br>";
 }
} catch(e){ s+=e.message+"<br>";}
}
function addform(){
 try{
 var mform=document.getElementById("t1");
 var i,mfs,mle,mla,minp,mbr,mtext=null;
 for(i=1;i<3;i++){
 mfs=document.createElement("fieldset");
 mle=document.createElement("legend");
 mtext=document.createTextNode("album "+i);
 mle.appendChild(mtext);
 mla=document.createElement("label");
 mtext=document.createTextNode("artista");
 mla.appendChild(mtext);
 minp=document.createElement("input");
 minp.setAttribute("type", "text");
 minp.setAttribute("name", "artista_"+i);
 
 mbr=document.createElement("br");
 mfs.appendChild(mle);
 mfs.appendChild(mla);
 mfs.appendChild(minp);
 mfs.appendChild(mbr);
 mform.appendChild(mfs);
 } 
 s="";
 getDOM(document,"");
 document.getElementById('out').innerHTML=s;
 } catch(e){ alert(e.message);}
}
</script>
</head>
<body>
<form id="t1">
 <fieldset>
  <legend>album n.0</legend>
  <label>artista</label><input type="text" name="artista_0"/><br/>
 </fieldset>
</form>
<a href="#" onclick="addform();return false;">aggiungi dati alla
form</a>
<br/>
<pre id="out">DOM</pre>
</body>
</html>
====
Che mi fornisce in output con IE:
=====
[[object]]
- -<HTML>
- - - -<HEAD>
- - - - - -<TITLE>
- - - - - -</TITLE>
- - - - - -<STYLE>
- - - - - -</STYLE>
- - - - - -<SCRIPT>
- - - - - -</SCRIPT>
- - - -</HEAD>
- - - -<BODY>
- - - - - -<FORM>
- - - - - -id=t1
- - - - - - - -<FIELDSET>
- - - - - - - - - -<LEGEND>
- - - - - - - - - - - -[[object]]
- - - - - - - - - - - -album n.0
- - - - - - - - - - - -[/[object]]
- - - - - - - - - -</LEGEND>
- - - - - - - - - -<LABEL>
- - - - - - - - - - - -[[object]]
- - - - - - - - - - - -artista
- - - - - - - - - - - -[/[object]]
- - - - - - - - - -</LABEL>
- - - - - - - - - -<INPUT>
- - - - - - - - - -name=artista_0
- - - - - - - - - -</INPUT>
- - - - - - - - - -<BR>
- - - - - - - - - -</BR>
- - - - - - - -</FIELDSET>
- - - - - - - -[[object]]
- - - - - - - -
- - - - - - - -[/[object]]
- - - - - - - -<FIELDSET>
- - - - - - - - - -<LEGEND>
- - - - - - - - - - - -[[object]]
- - - - - - - - - - - -album 1
- - - - - - - - - - - -[/[object]]
- - - - - - - - - -</LEGEND>
- - - - - - - - - -<LABEL>
- - - - - - - - - - - -[[object]]
- - - - - - - - - - - -artista
- - - - - - - - - - - -[/[object]]
- - - - - - - - - -</LABEL>
- - - - - - - - - -<INPUT>
- - - - - - - - - -name=artista_1
- - - - - - - - - -</INPUT>
- - - - - - - - - -<BR>
- - - - - - - - - -</BR>
- - - - - - - -</FIELDSET>
- - - - - - - -<FIELDSET>
- - - - - - - - - -<LEGEND>
- - - - - - - - - - - -[[object]]
- - - - - - - - - - - -album 2
- - - - - - - - - - - -[/[object]]
- - - - - - - - - -</LEGEND>
- - - - - - - - - -<LABEL>
- - - - - - - - - - - -[[object]]
- - - - - - - - - - - -artista
- - - - - - - - - - - -[/[object]]
- - - - - - - - - -</LABEL>
- - - - - - - - - -<INPUT>
- - - - - - - - - -name=artista_2
- - - - - - - - - -</INPUT>
- - - - - - - - - -<BR>
- - - - - - - - - -</BR>
- - - - - - - -</FIELDSET>
- - - - - -</FORM>
- - - - - -<A>
- - - - - - - -[[object]]
- - - - - - - -aggiungi dati alla form
- - - - - - - -[/[object]]
- - - - - -</A>
- - - - - -[[object]]
- - - - - - 
- - - - - -[/[object]]
- - - - - -<BR>
- - - - - -</BR>
- - - - - -<PRE>
- - - - - -id=out
- - - - - -</PRE>
- - - -</BODY>
- -</HTML>
null
[/[object]]
=====
Che 'ritraducendo' in HTML:
====
<HTML>
 <HEAD>
  <TITLE>
  </TITLE>
  <STYLE>
  </STYLE>
  <SCRIPT>
  </SCRIPT>
 </HEAD>
 <BODY>
  <FORM id='t1'>
   <FIELDSET>
    <LEGEND>
     album n.0
    </LEGEND>
    <LABEL>
     artista
    </LABEL>
    <INPUT name='artista_0'>
    <BR>
   </FIELDSET>
   <FIELDSET>
    <LEGEND>
     album 1
    </LEGEND>
    <LABEL>
     artista
    </LABEL>
    <INPUT name='artista_1'>
    <BR>
   </FIELDSET>
   <FIELDSET>
    <LEGEND>
     album 2
    </LEGEND>
    <LABEL>
     artista
    </LABEL>
    <INPUT name='artista_2'>
    <BR>
   </FIELDSET>
  </FORM>
  <A>
   aggiungi dati alla form
  </A>
  <BR>
  <PRE id='out'>
  </PRE>
 </BODY>
</HTML>
====
In questo momento saro' rincoglionito ma non vedo il problema di cui
parli.
L'output con Mozilla (dove avevo controllato con il DOM Inspector per
il post originale) e' molto simile a parte [object text] al posto
degli [object] di IE e la presenza, oltre al codice Javascript tra
<SCRIPT> e <SCRIPT> in un [object text] , di [object text] anche per i
ritorno a capo nel testo/codice della pagina.
Se tu hai un DOM Inspector per IE dimmi che cosa ottieni e quale
problema trovi.
'bye

 parli.
l'alert di cui prima dovrebbe risolverti il dubbio. Se lo fai girare sia su
IE che su Mozilla te ne accorgerai. Su Mozilla hai l'output che ti aspetti
di ricevere, su IE no. E' una limitazione conosciuta.
-- 
C'ya,
  ZER0 :: coder.gfxer.webDesigner();
"When you have eliminated the impossible, whatever remains,
however improbable, must be the truth." (S.H.)

 E' una limitazione conosciuta.
A questo punto direi che la limitazione e' sul fatto che uno non deve
aspettarsi che innerHTML sia sempre corrispondente a quello che e'
definito nel DOM.
Attendo ulteriori commenti.
'bye

 definito nel DOM.
No purtroppo. Il punto e' un altro (leggi su).
-- 
C'ya,
  ZER0 :: coder.gfxer.webDesigner();
Le donne si dividono in 4 categorie: le suore (non la danno a nessuno);
le puttane (la danno a tutti); le stronze (la danno a tutti tranne che 
a te); le rompiballe (la danno a te e solo a te).

 :-)
Beh, allora farei una cosa cosi':
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
<title>DOM Inspector</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
 text-align: center;
}
textarea {
 width: 90%;
 height: 200px;
}
iframe {
 height: 0px;
 visibility: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
function convertireUrl(str)
{
 if(str)
  return 'file:///'+str.replace(/\\/g,'/');
 return 'about:blank';
}
function generaHtml()
{
 top['iframeNascosto'].location.href=convertireUrl(document.forms[0].fileHtml.value);
}
function putHtml()
{
 if(top['iframeNascosto'].location.href!='about:blank'){
  var str=top['iframeNascosto'].document.documentElement.innerHTML;
  str=str.replace(/&lt;/g,'<').replace(/&gt;/g,'>');
  document.forms[0].outPut.value=str;
 }
}
//-->
</script>
</head>
<body>
<form action="" method="get" onsubmit="return false" onreset="top['iframeNascosto'].location.href='about:blank';return true">
  <p>
    <textarea id="outPut" name="outPut" rows="10" cols="50" readonly="readonly"></textarea>
  </p>
  <p> 
    <input id="fileHtml" name="fileHtml" type="file" />
  </p>
  <p> 
    <input type="reset" value="Reset" />
    &nbsp;&nbsp; &nbsp;&nbsp; 
    <input type="button" value="Genera l'HTML" onclick="generaHtml()" />
  </p>
</form>
<iframe src="about:blank" id="iframeNascosto" name="iframeNascosto" onload="putHtml()"></iframe>
</body>
</html>

su msdn.
Lo cerco, ho il presentimento che il problema non si limiti al settare
gli attributi.
...
Cercato prima di spedire il messaggio, quello che segue deriva da
quello che ho trovato :-)
Leggere:
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/createelement.asp
In pratica se vuoi definire il name dell'elemento input creato lo devi
fare durante la creazione:
 if(typeof(document.all)=="object"){
	// per IE
	minp=document.createElement("<input type='text'
name='"+"artista_"+i+"'>");
 } else {
	// per Mozilla (NB l'uso di <input..> come parametro per
	// createElement a Mozilla non piace :-))
	minp=document.createElement("input");
	minp.setAttribute("type", "text");
	minp.setAttribute("name", "artista_"+i);
 }
A questo punto:
<form>.elements[n] - li trova tutti
<form>.<nomeelemento> - lo trova
getElementsByTagName('INPUT') - li trova tutti
getElementsByName(<nomeelemento>) - lo trova
E l'innerHTML e' giusto anche lui.
'bye

 E l'innerHTML e' giusto anche lui.
Perche' l'innerHTML rispecchia esattamente la struttura che IE sta tenendo
in memoria in quel momento.
-- 
C'ya,
  ZER0 :: coder.gfxer.webDesigner();
Una mente perversa e' un peccato sprecarla.


 disabilitati (invece del grigio, vorrei mettere un altro colore)?
Grazie a tutti per la spiegazione dettagliata ;-)