Solved

Greyed Out Text and ASP.net

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Many of us here at EE write code. Many of us write exceptional code; just as many of us write exception-prone code. As we all should know, exceptions are a mechanism for handling errors which are typically out of our control. From database errors, t…
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
In a recent question (https://www.experts-exchange.com/questions/28997919/Pagination-in-Adobe-Acrobat.html) here at Experts Exchange, a member asked how to add page numbers to a PDF file using Adobe Acrobat XI Pro. This short video Micro Tutorial sh…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

770 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