Pre-fill text box in gray, remove on focus

Posted on 2005-04-27
Last Modified: 2007-12-06
Hi – I've seen html forms where some text boxes are pre-filled with text in a light gray color (to make clear it's an example). The example text disappears on focus (alternatively the entire text becomes marked on focus so it disappears once the user types something) and the user types in text, which appears in black.

Any idea how to do this?

Question by:shibulsky
    LVL 32

    Accepted Solution

    This is one example. A css class called disabledText and an onfocus event which removes the text and change color to black.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    <style type="text/css">
    <script type="text/javascript">
    function enableField(field){
    <p>THis is a test</p>
    <input type="text" class="disabledText" value="Type your text here" onfocus="enableField(this)">
    LVL 19

    Assisted Solution

    I would not recomment that...if a textfield is greyed out...normally it's not edittable...

    I would be confused...

    LVL 32

    Expert Comment

    Yes, that's right. Use the code, but use a different color than grey.

    Author Comment

    Thanks for you help,

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
    Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    745 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