Textbox that clears on first click

G

Guest

Hi

I want to have a textbox on my webpage that shows 'Type here' in gray. When
you click on the textbox, that text disappears and you can type your search,
rather than having to select it and press delete.

Be super-cool if it could also change the textcolor as well.

Any ideas on how to do this? I dont mind using another control, as long as
its free (its for a charity intranet).

Cheers



Dan
 
E

Eliyahu Goldin

Dan,

You need to handle client-site keyboard events in javascript. You will have
to work out a bit of logic for detecting very first key pressing.

Eliyahu
 
S

Steven Cheng[MSFT]

Hi Dan,

As Eliyahu has mentioned, we can just use some clientside scripts to do
such work. We can put some initial text in the textbox and then use the
"onfocus" dhtml event to detect the user's begin inputing , and use
"onblur" event to detect user's move out ....
Here are some simple code snippet which simulate such a TextBox:

<HTML>
<HEAD>
<title>ClientTextBox</title>
<script language="javascript">
function txt_onblur(txt)
{
var len = txt.value.length;

if(len <= 0)
{
txt.value = "Search....";
}
}

function txt_onfocus(txt)
{
var val = txt.value;

if(val == "Search....")
{
txt.value = "";
}
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<INPUT type="text" id="txtClient" name="txtClient"
onblur="txt_onblur(this);" onfocus="txt_onfocus(this);" value="Search...."
/>
<asp:Button id="Button1" runat="server" Text="Button"></asp:Button>
</form>
</body>
</HTML>


Hope helps. Thanks,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

--------------------
| From: "Eliyahu Goldin" <[email protected]>
| References: <[email protected]>
| Subject: Re: Textbox that clears on first click
| Date: Mon, 16 Jan 2006 12:38:22 +0200
| Lines: 29
| X-Priority: 3
| X-MSMail-Priority: Normal
| X-Newsreader: Microsoft Outlook Express 6.00.2900.2527
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.2527
| X-RFC2646: Format=Flowed; Original
| Message-ID: <[email protected]>
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| NNTP-Posting-Host: 212.143.94.3
| Path:
TK2MSFTNGXA02.phx.gbl!TK2MSFTNGXA01.phx.gbl!TK2MSFTFEED02.phx.gbl!tornado.fa
stwebnet.it!tiscali!newsfeed1.ip.tiscali.net!border2.nntp.ams.giganews.com!n
ntp.giganews.com!news-out.tin.it!feeder.news.tin.it!207.46.248.18.MISMATCH!T
K2MSFTNGP08.phx.gbl!TK2MSFTNGP15.phx.gbl
| Xref: TK2MSFTNGXA02.phx.gbl
microsoft.public.dotnet.framework.aspnet:371084
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| Dan,
|
| You need to handle client-site keyboard events in javascript. You will
have
| to work out a bit of logic for detecting very first key pressing.
|
| Eliyahu
|
| | > Hi
| >
| > I want to have a textbox on my webpage that shows 'Type here' in gray.
| > When
| > you click on the textbox, that text disappears and you can type your
| > search,
| > rather than having to select it and press delete.
| >
| > Be super-cool if it could also change the textcolor as well.
| >
| > Any ideas on how to do this? I dont mind using another control, as long
as
| > its free (its for a charity intranet).
| >
| > Cheers
| >
| >
| >
| > Dan
|
|
|
 
S

Steven Cheng[MSFT]

Hi Dan,

Does that helps some? If still anything else we can help, please feel free
to post here.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)


--------------------
| X-Tomcat-ID: 64558820
| References: <[email protected]>
<[email protected]>
| MIME-Version: 1.0
| Content-Type: text/plain
| Content-Transfer-Encoding: 7bit
| From: (e-mail address removed) (Steven Cheng[MSFT])
| Organization: Microsoft
| Date: Tue, 17 Jan 2006 03:23:10 GMT
| Subject: Re: Textbox that clears on first click
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
| Message-ID: <[email protected]>
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| Lines: 77
| Path: TK2MSFTNGXA02.phx.gbl
| Xref: TK2MSFTNGXA02.phx.gbl
microsoft.public.dotnet.framework.aspnet:371305
| NNTP-Posting-Host: tomcatimport2.phx.gbl 10.201.218.182
|
| Hi Dan,
|
| As Eliyahu has mentioned, we can just use some clientside scripts to do
| such work. We can put some initial text in the textbox and then use the
| "onfocus" dhtml event to detect the user's begin inputing , and use
| "onblur" event to detect user's move out ....
| Here are some simple code snippet which simulate such a TextBox:
|
| <HTML>
| <HEAD>
| <title>ClientTextBox</title>
| <script language="javascript">
| function txt_onblur(txt)
| {
| var len = txt.value.length;
|
| if(len <= 0)
| {
| txt.value = "Search....";
| }
| }
|
| function txt_onfocus(txt)
| {
| var val = txt.value;
|
| if(val == "Search....")
| {
| txt.value = "";
| }
| }
| </script>
| </HEAD>
| <body>
| <form id="Form1" method="post" runat="server">
| <INPUT type="text" id="txtClient" name="txtClient"
| onblur="txt_onblur(this);" onfocus="txt_onfocus(this);"
value="Search...."
| />
| <asp:Button id="Button1" runat="server" Text="Button"></asp:Button>
| </form>
| </body>
| </HTML>
|
|
| Hope helps. Thanks,
|
| Steven Cheng
| Microsoft Online Support
|
| Get Secure! www.microsoft.com/security
| (This posting is provided "AS IS", with no warranties, and confers no
| rights.)
|
| --------------------
| | From: "Eliyahu Goldin" <[email protected]>
| | References: <[email protected]>
| | Subject: Re: Textbox that clears on first click
| | Date: Mon, 16 Jan 2006 12:38:22 +0200
| | Lines: 29
| | X-Priority: 3
| | X-MSMail-Priority: Normal
| | X-Newsreader: Microsoft Outlook Express 6.00.2900.2527
| | X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.2527
| | X-RFC2646: Format=Flowed; Original
| | Message-ID: <[email protected]>
| | Newsgroups: microsoft.public.dotnet.framework.aspnet
| | NNTP-Posting-Host: 212.143.94.3
| | Path:
|
TK2MSFTNGXA02.phx.gbl!TK2MSFTNGXA01.phx.gbl!TK2MSFTFEED02.phx.gbl!tornado.fa
|
stwebnet.it!tiscali!newsfeed1.ip.tiscali.net!border2.nntp.ams.giganews.com!n
|
ntp.giganews.com!news-out.tin.it!feeder.news.tin.it!207.46.248.18.MISMATCH!T
| K2MSFTNGP08.phx.gbl!TK2MSFTNGP15.phx.gbl
| | Xref: TK2MSFTNGXA02.phx.gbl
| microsoft.public.dotnet.framework.aspnet:371084
| | X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
| |
| | Dan,
| |
| | You need to handle client-site keyboard events in javascript. You will
| have
| | to work out a bit of logic for detecting very first key pressing.
| |
| | Eliyahu
| |
| | | | > Hi
| | >
| | > I want to have a textbox on my webpage that shows 'Type here' in
gray.
| | > When
| | > you click on the textbox, that text disappears and you can type your
| | > search,
| | > rather than having to select it and press delete.
| | >
| | > Be super-cool if it could also change the textcolor as well.
| | >
| | > Any ideas on how to do this? I dont mind using another control, as
long
| as
| | > its free (its for a charity intranet).
| | >
| | > Cheers
| | >
| | >
| | >
| | > Dan
| |
| |
| |
|
|
 

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

Ask a Question

Members online

No members online now.

Forum statistics

Threads
474,432
Messages
2,571,682
Members
48,796
Latest member
Greg L.

Latest Threads

Top