change TextBox.BackColor property onFocus event

drasko · March 20th, 2004, 07:53 AM

Hi,

I want to change TextBox1.BackColor property
when it gets focus.How can I do this, think
JavaScript is only way, but...

bmains · March 20th, 2004, 08:57 PM

I think for focus, yes. You would have to specify autopostback=true, and the page would refresh every time you clicked in the textbox and click out (would be two refreshes if you click out of one textbox and into another). I would think Javascript, JScript, or VBScript is your best bet.

planoie · March 21st, 2004, 08:06 PM

Use the javascript triggered by the onFocus and onBlur attributes within the textbox html. The javascript you need to use to actually change the color is something like this:

//To set it
textbox.style.backgroundColor = "#FF0000";

//To "clear" it. If the BGcolor is set by some CSS style,
//clearing it will make it revert back to the CSS defined appearance.
textbox.style.backgroundColor = "";

Take a look at the CSS reference at the MSDN site. This is one of the most complete CSS/DHTML references I have found:
http://msdn.microsoft.com/library/de..._ref_entry.asp

You can set the onFocus and onBlur properties directly in the HTML markup for the textbox control, or you can do it thru the Attributes collection of the control in the code. All client side events must be accessed in this way because there are no properties on the server controls for these events. Unfortunately it seems that Microsoft didn't think that any of us actually would still want to do client-side events once we started using .NET.

Peter
------------------------------------------------------
Work smarter, not harder.

drasko · March 23rd, 2004, 09:40 AM

I don't know anything about JavaScript but tried:
1)

<form id="JSTest" method="post" runat="server">
...
<SPAN onFocus="this.style.backgroundColor='red'">
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
</SPAN></form>

and nothing happend

2)
<asp:TextBox id="TextBox1" onFocus = "TextBox1.style.backgroundColor='red'" runat="server"></asp:TextBox>
When I click on TextBox1 get error message: TextBox1 is undefined
Can you give me some example?

Maxood · March 23rd, 2004, 12:02 PM

First you always have to include the <%@ Import Namespace%= System.Drawing.Color %>
Then you can set the color of the object in ASP.Net.For genrating events you have to specify the (Sender as Object,E as EventArgs) in the subprocedure.
Here is code that will explain you:
  <%@ Import Namespace= "System.Drawing.Color" %>
<%@ Page Language="VB" runat="server" %>

<script language="vb" runat="server">
Sub ChangeColor(Sender as Object,E as EventArgs)
    txtName.BackColor = System.Drawing.Color.Cyan
End Sub

</script>

<html>
    <body>
        <form runat="server">

            <asp:TextBox id="txtName" runat="server"/></br>
            <asp:Button id="btn" OnClick=ChangeColor Text = "Change Color" runat="server"/>
        </form>
    </body>
</html>

Now you just need to know how to catch the focus event.I have tried OnFocus,OnEnter for the TextBox but it didn't work.
Hope this helps...

  CEO InteliSoft

Maqsood ur Rahman

bmains · March 23rd, 2004, 12:18 PM

In the page load, use the Attributes property and the Add method to add an attribute to the text box. Add attributes for the onfocus and onblur methods, and set the this.style.backgroundColor = '<color>'.

Now the backgroundColor attribute; it's either backgroundColor, background-color, or bgcolor (I can't remember; it's been a while).

Hope this helps,

Brian

planoie · March 23rd, 2004, 04:27 PM

drasko,

You are on the right track with what you tried accept for a few small things:

A) A span is not a "focus-able" object like a textbox or button. You can however use the onMouseOver type events.

B) The code you used in the span's onFocus would work for the textbox:
<asp:TextBox id="TextBox1" onFocus = "this.style.backgroundColor='red'" runat="server"></asp:TextBox>

Once this control is translated to HTML by the framework, the onFocus event will work just fine using "this". You can always call "this" from a javascript event handler within the object you need to manipulate.

Using "TextBox1" as the object name *should* have worked but when you deal with .net controls, using the server names in client side code doesn't always work because of the way .net names controls in the resulting HTML. It's safest to use "this" when you are running javascript within the object itself. If you have to call a function from a control that needs to manipulate that control you can always pass "this" to the control and still not have to worry about knowing the exactl name that .net generates for the control.

(BTW- You don't need any of the .net stuff maxood suggested because all of what you are doing is client-side.)

When calling the styles in javascript, they usually follow this form: "backgroundColor". When setting the same style in CSS it's "background-color". When the style is in the HTML tag attribute, well, there doesn't seem to be a consistency with those. You just have to have a good HTML reference with you! :)

Peter
------------------------------------------------------
Work smarter, not harder.

drasko · March 24th, 2004, 11:00 AM

Peter you are right, it works

Thank you

nareshkumarsr · January 26th, 2009, 12:23 AM

Hi i am new to java script i am having a textbox it has some characters eg:google search by using the java script i want to change the color in onfocus using style sheet
but wen i type some characters it should not get the the color which i get from script

please help me out
anysuggestions will be thankfull