Change the colour of a textbox when it gets the focus - asp.net

G

GornHorse

Centurion
Joined
May 27, 2003
Messages
105
Location
Australia
Hi There,

What i would like to do is be able to change the look of a textbox when it gets focus, to make it stand out. Then, when it loses focus, change it back to the original, and do the same for the next one etc along the line.

I think that this may need to be done on the client-side, but my javascript knowledge is relatively non-existent, and am hoping someone may be able to help me out here.

If anyone has any ideas, i'd like to hear them.

Regards,
Michelle
 
hi
It seems we have a similar problem and I was wondering if you've solved your problem yet but if you did can you help me as well with the code that change colour of a textbox when it gets the focus, the code that I have work on asp and I can't get it to work on asp.net since I'm developing in asp.net

Thanks in advance
 
In the Enter event of the text box add the following code to change color to cyan:
Code: 
DirectCast(sender, Textbox).BackColor = Color.FromArgb(255, Color.FromName("Cyan"))

In the LostFocus event of the text box add the following code to change color to white:
Code: 
DirectCast(sender, Textbox).BackColor = Color.FromArgb(255, Color.FromName("White"))
 
Actually you can do this in pure Javascript on the client side by altering the CSS properties (this will override class & style tags placed on the textbox) with this HTML markup, as you can see you can see you can do it via CSS classes or CSS properties.

<html>
<head>
<title>Background Color Test</title>
<style type="text/css"> <!--

.textbox-on {
background: #000000;
}

.textbox-off {
background: #FFFFFF;
}

--></style>
</head>

<body>
<br /><br /><br />
<form>
<input type="text" onMouseOver="style.backgroundColor='#000000'" onMouseOut="style.backgroundColor='#FFFFFF'" />
<br /><br />
<input type="text" onMouseOver="this.className='textbox-on'" onMouseOut="this.className='textbox-off'" />
</form>
</body>
</html>

I've tested this both in IE6 and in the Mozilla Engine (Firefox 0.9.3). I'm sure it will work the same in IE5 also.
 
Last edited:
Back
Top