?
Solved

Greyed Out Text and ASP.net

Posted on 2013-01-20
3
Medium Priority
?
640 Views
Last Modified: 2013-01-21
I would like to, have greyed out text in a textBox when the web application starts.  When someone clicks on the textBox I would like the greyed out text to be removed so that they can type, and if they leave the textBox, I would like this greyed out text to return.

How can I achieve this in Web developer Express, using VB ?

Thanks
0
Comment
Question by:ndr-itsolutions
3 Comments
 
LVL 6

Accepted Solution

by:
esolve earned 1200 total points
ID: 38798557
You can achieve this by using an input control. Just add an id and runat=server so that it can behave like a server control.

You can then access the txtUser.Value of the control in code behind.

<input name="txtUser" type="text" id="txtUser" runat="server" value="username" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" />

Additionally you can add a css class to modify the text appearance. eg.

class="login-block"

<style>
        .login-block {
            background: none;
            color: #5d5858;
            width: 145px;
            margin: 5px;
            text-transform: capitalize !important;
            font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        }
    </style>
0
 
LVL 18

Expert Comment

by:Rajar Ahmed
ID: 38798836
Try this,
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="greyedTxtbox.aspx.vb" Inherits="greyedTxtbox" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
    .blurStyle
    {
        font-size:15px;
        color:gray;
    }
    .focusStyle
    {
        font-size:15px;
        color:Black;
    }
        
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" onblur="this.className='blurStyle';" onFocus="this.className='focusStyle';"
        class="blurStyle" Text="Hi test"></asp:TextBox>
    </div>
    </form>
</body>
</html>

Open in new window

0
 
LVL 16

Expert Comment

by:Kamal Khaleefa
ID: 38799918
just use a javascript on onchange event at the text box

example:

 <asp:TextBox ID="TextBox1" runat="server" onchange="ChangeColor()"  ></asp:TextBox>

the javascript function will look like this

  <script language="javascript" type="text/javascript">

function ChangeColor()
{TextBox1= "<%=TextBox1.ClientID %>"
 document.getElementById(TextBox1).style.color='grey'

}
</script>
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
More often than not, we developers are confronted with a need: a need to make some kind of magic happen via code. Whether it is for a client, for the boss, or for our own personal projects, the need must be satisfied. Most of the time, the Framework…
this video summaries big data hadoop online training demo (http://onlineitguru.com/big-data-hadoop-online-training-placement.html) , and covers basics in big data hadoop .
When cloud platforms entered the scene, users and companies jumped on board to take advantage of the many benefits, like the ability to work and connect with company information from various locations. What many didn't foresee was the increased risk…
Suggested Courses
Course of the Month12 days, 19 hours left to enroll

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question