david...
Approach this one with care...IE doesn't behave the same way as FF as you've already experienced.
If you use the "disabled" parameter for the field FF will "gray out" the disabled textbox or textarea...IE will gray out any text contained in there, but won't add the cool gray background to the field.
You can, however, create a "disabled" class in your css file, but in my tests, I couldn't get it to work as an inherited property off the input tag so that means you'll have to set the class when you set the disabled property.
You can copy/paste this test to see how it works in both IE & FF:
<HTML>
<HEAD>
<style type="text/css">
.disabled
{
background-color: #CCC;
}
</style>
</HEAD>
<BODY>
<input type="text" value="Enabled">
<br>
<input type="text" disabled class="disabled" value="Disabled">
<p/>
<textarea disabled class="disabled">This is the content of a textarea</textarea>
</BODY>
</HTML>
Hope this helps!
Ric
|
|
Expert:
|
rcastagna
|
|
Date:
|
Dec 28, 2006
|
|
Time:
|
10:27
|
|
|
|
Votes: Good (0) | Bad (0)
Login to rate this answer
|
|
No CSS for disabled
Use HTML controls attribute "disabled"
W3 http://www.w3.org/TR/html4/interact/form...
MS http://msdn.microsoft.com/workshop/autho...
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function disable_controls( state) {
var frm = document.forms[0] ;
var len = frm.elements.length ;
var cnt = 0 ;
for ( var i=0; i < len; i++) {
var elem = frm.elements[i] ;
if (elem.type != "hidden") {
elem.disabled = state ;
}
}
}
</script>
</head>
<body>
<button onclick="disable_controls( false)">Enable</button>
<button onclick="disable_controls( true)">Disable</button>
<br>
<form action="yours" method="POST" enctype="application/x-www-form-urlencoded">
<input name="t1" disabled size="10" value="ini val" type="text">
<br>
<textarea name="t2" cols="10" disabled >abc
def</textarea> </form>
</body>
</html>
|
|
Expert:
|
xarcus
|
|
Date:
|
Dec 28, 2006
|
|
Time:
|
10:44
|
|
|
|
Votes: Good (0) | Bad (0)
Login to rate this answer
|
|
|
In MSIE the contents appear greyed.
for the background you can add this line to my disable_controls() routine
after
elem.disabled = state ;
insert
elem.style.backgroundColor = state?"yellow":"white" ;
|
|
Expert:
|
xarcus
|
|
Date:
|
Dec 28, 2006
|
|
Time:
|
10:59
|
|
|
|
Votes: Good (0) | Bad (0)
Login to rate this answer
|
|
|
hmmm....looks like your solution does the exact same thing that I suggested.
why do you bash using CSS when your "elem.style.backgroundColor = state?"yellow":"white";" does effectively the same thing?
My impression was that David needs to set the disabled state of a field programmatically, and could use the following:
function Disable(id) {
var ctrl = document.getElementById(id);
ctrl.disabled = false;
ctrl.style.class = "";
}
My apologies if I took your comments harshly and incorrectly, mate.
ric
|
|
Expert:
|
rcastagna
|
|
Date:
|
Jan 04, 2007
|
|
Time:
|
15:47
|
|
|
|
Votes: Good (0) | Bad (0)
Login to rate this answer
|
|
|
thanks ric and xarcus for your suggestions.
You're right, ric, that what I needed was to disable/enable the fields programatically. And your suggestion about using a "disabled" class is the one I ended up using, although I was initially hoping that there were a css-property i could use instead, like a:hover...
So I'll live with this solution and perhaps in CSS3 and when the browsers support that in 2020... :)
|
|
Expert:
|
david
|
|
Date:
|
Jan 05, 2007
|
|
Time:
|
00:59
|
|
|
|
Votes: Good (0) | Bad (0)
Login to rate this answer
|
|
|
The CSS method I use is:
input[disabled], input[readonly], select[disabled], select[readonly], checkbox[disabled], checkbox[readonly], textarea[disabled], textarea[readonly]
{
background-color: #dcdcdc;
border: #3532ff 1px solid;
color: #000000;
cursor: default;
}
|
|
Expert:
|
JohnDoranNYC
|
|
Date:
|
Aug 07, 2007
|
|
Time:
|
13:50
|
|
|
|
Votes: Good (0) | Bad (0)
Login to rate this answer
|
|
|
|
|
Expert:
|
ascemilas
|
|
Date:
|
May 23, 2008
|
|
Time:
|
21:55
|
|
|
|
Votes: Good (0) | Bad (0)
Login to rate this answer
|
|
|
|
|
|
|
This question has been answered, and points have been rewarded to the following experts:
You're welcome however to comment or give additional information or if you wish, you have the ability to write an Answer Summary for this question by clicking on the "Answer Summaries" Tab.
|
|