• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 656
  • Last Modified:

Greyed Out Text and ASP.net

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
ndr-itsolutions
Asked:
ndr-itsolutions
1 Solution
 
esolveSoftware Development ManagerCommented:
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
 
Rajar AhmedConsultantCommented:
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
 
Kamal KhaleefaInformation Security SpecialistCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now