p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   Javascript How-To (http://p2p.wrox.com/forumdisplay.php?f=87)
-   -   Changing Text Box Background Color (http://p2p.wrox.com/showthread.php?t=7110)

rodmcleay December 10th, 2003 09:13 PM

Changing Text Box Background Color
 
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 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 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 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 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 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 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 December 10th, 2003 10:59 PM

That is good to know!

Thanks (even though you asked the question:))


rodmcleay 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 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


All times are GMT -4. The time now is 07:28 PM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.