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

Pre-fill text box in gray, remove on focus

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
shibulsky
Asked:
shibulsky
  • 2
2 Solutions
 
BatalfCommented:
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
 
DreamMasterCommented:
I would not recomment that...if a textfield is greyed out...normally it's not edittable...

I would be confused...

Regards,
Max.
0
 
BatalfCommented:
Yes, that's right. Use the code, but use a different color than grey.
0
 
shibulskyAuthor Commented:
Thanks for you help,
/t
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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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