Changing Text Box Background Color

rodmcleay · #1 (**permalink**) December 10th, 2003, 09:13 PM

I am having trouble changing the background color of textboxes with client side javascript, can anyone point me in the right direction.

I have tried
document.all["txtManNo"].Style='background-color: #eeeeee;'
and
frm.txtManNo.Style = 'background-color: #eeeeee;'
with no luck

Any guidance would be much appreciated.

======================================
They say, best men are moulded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================

Snib · #2 (**permalink**) December 10th, 2003, 09:35 PM

Must it be JavaScript?

A stylesheet works fine, if not.

<style>
#input_box { background-color:#eeeeee; }
</style>

And then:

<input type="text" id="input_box">

Hope it works with you!;)

rodmcleay · #3 (**permalink**) December 10th, 2003, 09:39 PM

Thanks Snib,
and for the quick reply,
How do I then change it in client side code, so it begins as a grey background then with the onfocus method I wanted to change it to white,

======================================
They say, best men are moulded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================

Snib · #4 (**permalink**) December 10th, 2003, 09:58 PM

I've already tried a few different things, all failed.

If you find something, please tell me what it is.

I will let you know if I find a way

Snib

Snib · #5 (**permalink**) December 10th, 2003, 10:07 PM

I see...

I used

document.getElementById("text_box").style.backgrou nd-color="#eeeeee";

and I think JavaScript is confused by the "-" in "background-color."

If you know how to get around this, this way might work.

Snib

rodmcleay · #6 (**permalink**) December 10th, 2003, 10:10 PM

I think you are right, i was trying
document.all.formName.txtTextBoxName.style.backgro und-color = '#eeeeee';
Maybe bgColor, I'll try a few alternatives

======================================
They say, best men are moulded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================

rodmcleay · #7 (**permalink**) December 10th, 2003, 10:57 PM

Snib, this seems to work

document.all.form1.txt1.style.background = '#eeeeee';

======================================
They say, best men are moulded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================

Snib · #8 (**permalink**) December 10th, 2003, 10:59 PM

That is good to know!

Thanks (even though you asked the question:))

rodmcleay · #9 (**permalink**) December 10th, 2003, 11:04 PM

This was the effect I was after

Code:

    <HTML>
       <HEAD>
    <SCRIPT LANGUAGE=JavaScript>
          function changeColor(box)
          {
                document.all.form1.txt1.style.background = '#eeeeee';
                document.all.form1.txt2.style.background = '#eeeeee';
                document.all.form1.txt3.style.background = '#eeeeee';        
                document.all[box].style.background = '#ffffff';    
          }
    </SCRIPT>
    </HEAD>
    <BODY>
    <FORM NAME=form1>      
           <input onfocus="changeColor('txt1');" name="txt1" style="background-color:#eeeeee" id="txt1" value="Hello" ><br>
           <input onfocus="changeColor('txt2');" name="txt2" style="background-color:#eeeeee" id="txt2" value="Hello" ><br>
           <input onfocus="changeColor('txt3');" name="txt3" style="background-color:#eeeeee" id="txt3" value="Hello" ><br>
    </FORM>
    </BODY>
    </HTML>

======================================
They say, best men are moulded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================

joefawcett · #10 (**permalink**) December 11th, 2003, 05:07 AM

JavaScript follows a simple rule. If the css style is hyphenated then remove the hyphen and capitalise the following letter so:
[code
document.getElementById("idHere").style.background Color = "#dd0000";
[/code]

A brief look at any basic document would have saved all your agonising...

http://msdn.microsoft.com/library/de...ence_entry.asp

--

Joe

Need to download code?

Navigation