Solved

Greyed Out Text and ASP.net

Posted on 2013-01-20
3
622 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 300 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

920 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now