?
Solved

Pre-fill text box in gray, remove on focus

Posted on 2005-04-27
6
Medium Priority
?
810 Views
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?

Thanks
0
Comment
Question by:shibulsky
  • 2
4 Comments
 
LVL 32

Accepted Solution

by:
Batalf earned 500 total points
ID: 13877942
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" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.disabledText{
    color:#888888;
}
.normalText{
    color:#000000;
}
</style>
<script type="text/javascript">
function enableField(field){
    if(field.className=='disabledText'){
        field.className='normalText';
        field.value='';
    }
   
}
</script>
</head>
<body>
<p>THis is a test</p>
<input type="text" class="disabledText" value="Type your text here" onfocus="enableField(this)">
</body>
</html>
0
 
LVL 19

Assisted Solution

by:DreamMaster
DreamMaster earned 500 total points
ID: 13883966
I would not recomment that...if a textfield is greyed out...normally it's not edittable...

I would be confused...

Regards,
Max.
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13883972
Yes, that's right. Use the code, but use a different color than grey.
0
 

Author Comment

by:shibulsky
ID: 13886706
Thanks for you help,
/t
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

621 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