473,408 Members | 2,417 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,408 software developers and data experts.

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

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.

Jan 9 '07 #1
10 4289
sb********@aol.com 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???
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';
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;';
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>
---

HTH.
Jan 10 '07 #2
Doesn't work in IE (at least for me it doesn't). Any other ideas?

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>
---
Jan 10 '07 #3
sb********@aol.com 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?
>
>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>
Doesn't work in IE (at least for me it doesn't). Any other ideas?
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

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 10 '07 #4
sb********@aol.com wrote:
Doesn't work in IE (at least for me it doesn't). Any other ideas?
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.
Jan 10 '07 #5
Elegie said the following on 1/10/2007 10:51 AM:
sb********@aol.com wrote:
>Doesn't work in IE (at least for me it doesn't). Any other ideas?

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?
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.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 10 '07 #6
Randy Webb wrote:
Elegie said the following on 1/10/2007 10:51 AM:
<snip>
>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). ...

I copy/pasted your exact code into a blank HTML4.01 Strict test
document and it wouldn't create the input in IE7. ...
<snip>
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.
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.
Style-wise maybe not, mechanically it should be fine.

Richard.

Jan 10 '07 #7
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.
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.
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.
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.
Jan 10 '07 #8
Elegie said the following on 1/10/2007 12:58 PM:
Randy Webb wrote:
<snip>
>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.

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) :(
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.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 10 '07 #9
Randy Webb wrote:
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.
Could you have a user stylesheet that overrides any styles set in the
source?

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Jan 10 '07 #10
Matt Kruse said the following on 1/10/2007 2:26 PM:
Randy Webb wrote:
>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.

Could you have a user stylesheet that overrides any styles set in the
source?
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.....

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 11 '07 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: multimatum2 | last post by:
Hello, I need to enable/disable input text forms... But... I need to have the same style (color...) in both modes.. Could you help me ? Thanx a lot A small sample... ...
8
by: Margaret MacDonald | last post by:
I'm a js novice trying to teach myself. I'm using Flanagan's 'Javascript, the definitive guide' from O'Reilly as a text. But either I'm dopier than usual or its layout doesn't match my learning...
8
by: horos | last post by:
hey all, Ok, a related question to my previous one on data dumpers for postscript. In the process of putting a form together, I'm using a lot of placeholder variables that I really don't care...
7
by: Stefan Finzel | last post by:
Hi, is there a way to change the display property on Windows Mobile 2003 SE Mobile/Pocket Internet Explorer? See following example. Please note: visibilty property has the same problem. Is...
5
by: simon_s_li | last post by:
Hi, I have 5 fields in line where I need to drag and drop the text from one field to another field and then all the fields need to re-order themselves. So for instance if I drag the text in...
5
by: cjl | last post by:
Hey all: This code: if (stealth) { document.searchme.query.type = 'password'; } else {
2
by: yawnmoth | last post by:
Say I have two input elements and that I wanted to make it so that when the first ones input was what it should be, the focus would automatically be shifted to the next input element. ie....
1
by: littlealex | last post by:
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS! In IE6 the text for the following page doesn't display properly - rather than being...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.