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

Discussion in 'Javascript' started by sbaker8688, Jan 9, 2007.

  1. sbaker8688

    sbaker8688 Guest

    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.
     
    sbaker8688, Jan 9, 2007
    #1
    1. Advertisements

  2. sbaker8688

    Elegie Guest

    wrote:

    Hi,
    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.
    Using 'black' as a color to test whether the color is changed isn't very
    appropriate since the default font color is normally 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>
     
    Elegie, Jan 10, 2007
    #2
    1. Advertisements

  3. sbaker8688

    sbaker8688 Guest

    Doesn't work in IE (at least for me it doesn't). Any other ideas?
     
    sbaker8688, Jan 10, 2007
    #3
  4. sbaker8688

    Randy Webb Guest

    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?
    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 Webb, Jan 10, 2007
    #4
  5. sbaker8688

    Elegie Guest

    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.
     
    Elegie, Jan 10, 2007
    #5
  6. sbaker8688

    Randy Webb Guest

    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. 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 Webb, Jan 10, 2007
    #6
  7. 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).
    Style-wise maybe not, mechanically it should be fine.

    Richard.
     
    Richard Cornford, Jan 10, 2007
    #7
  8. sbaker8688

    Elegie Guest

    Randy Webb wrote:

    <snip>

    (Thanks for the description of your tests!)
    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.
    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) :(
    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.
     
    Elegie, Jan 10, 2007
    #8
  9. sbaker8688

    Randy Webb Guest

    Elegie said the following on 1/10/2007 12:58 PM:
    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 Webb, Jan 10, 2007
    #9
  10. sbaker8688

    Matt Kruse Guest

    Could you have a user stylesheet that overrides any styles set in the
    source?
     
    Matt Kruse, Jan 10, 2007
    #10
  11. sbaker8688

    Randy Webb Guest

    Matt Kruse said the following on 1/10/2007 2:26 PM:
    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 Webb, Jan 11, 2007
    #11
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.