Changing the text color of an input element (IE)?????

S

sbaker8688

My God, how on earth do you use javacript to change the text color of
an input element, and have it work with IE??? I've tried numerous
solutions. All of them work on browsers such as Mozilla. But none of
them work on IE.

This works in every browser I've tried besides IE:

var whatever = document.createElement( 'input' );
whatever.type = 'text';
// (more code)...
whatever.style.color = 'black';

This also works for other browsers besides IE:

whatever.style.cssText = 'color:black;';

I've tried other things as well. Nothing works in IE. Is there anyway
to change the text color inside an input box dynamically, and have it
work in IE? Can someone please help?

Thanks.
 
E

Elegie

(e-mail address removed) wrote:

Hi,
My God, how on earth do you use javacript to change the text color of
an input element, and have it work with IE???
Click to expand...

I'm not sure your god is reading this newsgroup, but let's try to answer
anyway :) You normally do it the the same way as with other browsers:
grab a reference to the INPUT element and update its color style
property. Also, note that style cascading rules would apply, so you
could lose the color initially set by CSS selectors.
whatever.style.color = 'black';
Click to expand...

Using 'black' as a color to test whether the color is changed isn't very
appropriate since the default font color is normally black...
whatever.style.cssText = 'color:black;';
Click to expand...

cssText is a property defined in the W3C DOM Styles specification. IE
does not support this specification but rather uses its own set of
objects and properties (in you want to know more about this, try
searching comp.lang.javascript archives for cssRules, currentStyle and
getComputedStyle).

Internet Explorer does have issues with dynamically created FORM
elements using DOM methods (e.g the NAME attribute not being set
correctly with radio buttons), however I wouldn't be able to tell what
goes wrong without some (trimmed) example code demonstrating the issue.

Try for yourself, in some blank document:

---
<body>
<script type="text/javascript">
var input=document.createElement("input");
input.type="text";
input.style.backgroundColor="yellow";
input.style.color="red";
document.body.appendChild(input);
</script>
</body>
 
R

Randy Webb

(e-mail address removed) said the following on 1/10/2007 10:17 AM:

Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?
Doesn't work in IE (at least for me it doesn't). Any other ideas?
Click to expand...

Wrap the code in a function, call it onload, and it will create the
input (at least in IE7 it does)

function addInput(){
var input=document.createElement("input");
input.type="text";
input.style.backgroundColor="yellow";
input.style.color="red";
document.body.appendChild(input);
}
window.onload=addInput
 
E

Elegie

Doesn't work in IE (at least for me it doesn't). Any other ideas?
Click to expand...

The code I have provided works as expected in IE5, IE5.5, IE6 and IE7 on
Windows XP SP2 (and of course, in Firefox 1.5 and Opera 9 as well). If
you have copied-pasted the code in some blank document (using standard
text editor) and that it still does not work, then I am afraid I won't
be able to help much more. Just to be sure: what platform are you
working on, what version of IE are you using?

@Randy: are you aware of some IE7 problem to process that kind of code
if not put in some load handler?


Regards,
Elegie.
 
R

Randy Webb

Elegie said the following on 1/10/2007 10:51 AM:
The code I have provided works as expected in IE5, IE5.5, IE6 and IE7 on
Windows XP SP2 (and of course, in Firefox 1.5 and Opera 9 as well). If
you have copied-pasted the code in some blank document (using standard
text editor) and that it still does not work, then I am afraid I won't
be able to help much more. Just to be sure: what platform are you
working on, what version of IE are you using?

@Randy: are you aware of some IE7 problem to process that kind of code
if not put in some load handler?
Click to expand...

I copy/pasted your exact code into a blank HTML4.01 Strict test document
and it wouldn't create the input in IE7. I thought maybe it wasn't
wanting to add it to the body so I tested it adding it to a form and it
still wouldn't. When I moved it into a function and called it onload of
the page it worked flawlessly adding it to an existing form. Then I
changed it back to your original code in a function, called it onload,
and it creates the input. I think it's more of a "IE won't add it since
the document isn't loaded completely" kind of thing but not positive.

How you can say you have it working in IE7 on XP SP2 is odd though as
that is exactly the platform I tested it on and it wouldn't create the
input without letting the document finish loading first.

Not sure "input" is a good name for the variable either.
 
R

Richard Cornford

Randy said:
Elegie said the following on 1/10/2007 10:51 AM:

I copy/pasted your exact code into a blank HTML4.01 Strict test
document and it wouldn't create the input in IE7. ...
Click to expand...
How you can say you have it working in IE7 on XP SP2 is odd
though as that is exactly the platform I tested it on and it
wouldn't create the input without letting the document finish loading first.
Click to expand...

The code as posted worked for me on IE 7.0.5730.11 (both literally, as
the entire document and replacing the body on a blank HTML 4.01 Strict
page) (on XP SP2).
Not sure "input" is a good name for the variable either.
Click to expand...

Style-wise maybe not, mechanically it should be fine.

Richard.
 
E

Elegie

Randy Webb wrote:

<snip>

(Thanks for the description of your tests!)
I think it's more of a "IE won't add it since
the document isn't loaded completely" kind of thing but not positive.
Click to expand...

If so, this would IMHO be some serious flaw, the tree is supposed to be
live by nature, refusing to modify it while it is being built would be
an inappropriate vendor choice.
How you can say you have it working in IE7 on XP SP2 is odd though as
that is exactly the platform I tested it on and it wouldn't create the
input without letting the document finish loading first.
Click to expand...

I have the same version as Richard (7.0.5730.11). I can only suppose
that either you have an older version, in which this was some bug, or
that you have some newer version, in which this is a feature.

I cannot imagine any other explanation at the moment (apart from some
mistake in my testing process, which I have however checked twice, and
which seems confirmed by Richard's results) :(
Not sure "input" is a good name for the variable either.
Click to expand...

Nope, indeed, sorry. In the context of the test one might think that
there could be some not-so-unusual naming conflict, and in the context
of some program it is probably not appropriate as well (I'd use some
variable name describing the field if known, or the more generic
"control" or "inputControl" if in a generic process, but that's just a
personal taste).


Regards,
Elegie.
 
R

Randy Webb

Elegie said the following on 1/10/2007 12:58 PM:
Randy Webb wrote:


I have the same version as Richard (7.0.5730.11). I can only suppose
that either you have an older version, in which this was some bug, or
that you have some newer version, in which this is a feature.

I cannot imagine any other explanation at the moment (apart from some
mistake in my testing process, which I have however checked twice, and
which seems confirmed by Richard's results) :(
Click to expand...

I just checked mine and it is also 7.0.5730.11 so I am not sure. I
rechecked the code again and it still doesn't work for me. Odd to say
the least.
 
M

Matt Kruse

Randy said:
I just checked mine and it is also 7.0.5730.11 so I am not sure. I
rechecked the code again and it still doesn't work for me. Odd to say
the least.
Click to expand...

Could you have a user stylesheet that overrides any styles set in the
source?
 
R

Randy Webb

Matt Kruse said the following on 1/10/2007 2:26 PM:
Could you have a user stylesheet that overrides any styles set in the
source?
Click to expand...

I don't. It's not just the styles that don't get applied, it won't
create the element at all unless I call it via a function. And I finally
figured out why. I always put code in the head section of a page unless
I absolutely need it somewhere else. document.body in the head section
before the page has made it to the body element.....
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I create a table using the input element? 1
How to display input options only after selecting an option from the 'select class' tag JS? 6
Changing action of <Enter> key in text input controls 1
Greasemonkey: access the value of a <INPUT> element? 2
Changing input type in IE? 5
changing focus to next input element 2
Working on mobile css menu with plenty of frustration! 2
How to get the height of an element in ie? 2

Members online

Total: 40 (members: 1, guests: 39)
Robots: 445

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top