readOnly input

Gary Homewood

I have a form with some input text fields, and I am toggling them between
readOnly and enterable, using JavaScript. In Mozilla, when the input is set
to readOnly, the background is greyed out automatically, which is nice, but
not in IE. If I explicitly set the background color to grey with my
JavaScript, I get a 3D inset border style. I could explicitly set the border
style at the same time, but I don't know what I need to match whatever the
default is. Any ideas?

Thank you

Jul 20 '05 #1

Duncan M.

"Gary Homewood" wrote

I have a form with some input text fields, and I am toggling them between
readOnly and enterable, using JavaScript. In Mozilla, when the input is set to readOnly, the background is greyed out automatically, which is nice, but not in IE. If I explicitly set the background color to grey with my
JavaScript, I get a 3D inset border style. I could explicitly set the border style at the same time, but I don't know what I need to match whatever the
default is. Any ideas?

Probably best to asume different defaults in different browsers, so no
explicit border declarations is going to help. Perhaps setting the empty
string ( someElement.style.border=''; ) is your best chance at getting the
default view.

Q1: Doesn't IE display the readonly-ness in any other way? Couldn't you use
disabled instead of readonly? IE displays disabled items with a faded font
colour.
Q2: Bit strange that your *border* changes when you play with the
*background*. Isn't there a mix up somewhere?
HTH
Ivo

Jul 20 '05 #2

Gary Homewood

"Duncan M." <no@email.please> wrote in message
news:<40**********************@news.wanadoo.nl>...

"Gary Homewood" wrote

I have a form with some input text fields, and I am toggling them between readOnly and enterable, using JavaScript. In Mozilla, when the input is set

to readOnly, the background is greyed out automatically, which is nice,

but

not in IE. If I explicitly set the background color to grey with my
JavaScript, I get a 3D inset border style. I could explicitly set the

border

style at the same time, but I don't know what I need to match whatever the default is. Any ideas?

Probably best to asume different defaults in different browsers, so no
explicit border declarations is going to help. Perhaps setting the empty
string ( someElement.style.border=''; ) is your best chance at getting the
default view.

I agree, I don't want to explicitly have to set a border style. I tried
setting the
border as an empty string, and I just got nothing as a border (!)

Q1: Doesn't IE display the readonly-ness in any other way? Couldn't you use disabled instead of readonly? IE displays disabled items with a faded font
colour.
I may be missing something, but IE doesn't seem to do anything with the
readOnly-ness.
I tried disabled instead of readOnly, but I don't want the text to have a
faded font,
and once the input is set to disabled it seems you can't set any other style
(like
setting the font to black, for example).
Q2: Bit strange that your *border* changes when you play with the
*background*. Isn't there a mix up somewhere?
I know, it does seem strange. That's what it does, though, honest!
HTH
Ivo

Jul 20 '05 #3

Michael Posthoff

Yes, I know the problem, as soon as You set the Background with JS, You get
this silly problem in IE.

document.getElementById(element).style.backgroundC olor='#FFFFCC';

Workaround is to define a stylesheet definition for all inputs.

INPUT, TEXTAREA, SELECT, OPTION {
border: 1px solid threedshadow;
}

Attention this causes checkboxes also to have a border unless You define a
special class for them to supress this:

..noBorder {border: none;}

Regards,
Michael
"Gary Homewood" <ga***********@hotmail.com> schrieb im Newsbeitrag
news:40***********************@lovejoy.zen.co.uk.. .

I have a form with some input text fields, and I am toggling them between
readOnly and enterable, using JavaScript. In Mozilla, when the input is set to readOnly, the background is greyed out automatically, which is nice, but not in IE. If I explicitly set the background color to grey with my
JavaScript, I get a 3D inset border style. I could explicitly set the border style at the same time, but I don't know what I need to match whatever the
default is. Any ideas?

Thank you

Jul 20 '05 #4