HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?

问题:

How do I make a textbox that has a grayed out content, and when I click on it to enter text, the grayed out portion, it disappears and allows me to enter the desired text?

Example:

A "First Name" text box. The words "First Name" are inside the text box grayed out, when I click, those words disappear and I write my name in it.

回答1:

This answer illustrates a pre-HTML5 approach. Please take a look at Psytronic's answer for a modern solution using the placeholder attribute.

---

HTML:

JavaScript:

function inputFocus(i) {     if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; } } function inputBlur(i) {     if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; } } 

回答2:

Chrome, Firefox, IE10 and Safari support the html5 placeholder attribute

In order to get a more cross browser solution you'll need to use some javascript, there are plenty of pre-made solutions out there, though I don't know any off the top of my head.

http://www.w3schools.com/tags/att_input_placeholder.asp

回答3:

With HTML5, you can do this natively with:

This is not supported with all browsers though (IE)

This may work:

Otherwise, if you are using jQuery, you can use .focus and .css to change the color.

回答4:

If you're targeting HTML5 only you can use:

For non HTML5 browsers, I would build upon Floern's answer by using jQuery and make the javascript non-obtrusive. I would also use a class to define the blurred properties.

$(document).ready(function () {      //Set the initial blur (unless its highlighted by default)     inputBlur($('#Comments'));      $('#Comments').blur(function () {         inputBlur(this);     });     $('#Comments').focus(function () {         inputFocus(this);     });  }) 

Functions:

function inputFocus(i) {     if (i.value == i.defaultValue) {         i.value = "";         $(i).removeClass("blurredDefaultText");     } } function inputBlur(i) {     if (i.value == "" || i.value == i.defaultValue) {         i.value = i.defaultValue;         $(i).addClass("blurredDefaultText");     } } 

CSS:

.blurredDefaultText {     color:#888 !important; } 

回答5:

The shortest way is to directly add the below code as additional attributes in the input type that you want to change.

onfocus="if(this.value=='Search')this.value=''"  onblur="if(this.value=='')this.value='Search'" 

Please note: Change the text "Search" to "go" or any other text to suit your requirements.

回答6:

This is an elaborate version, to help you understand

function setVolatileBehavior(elem, onColor, offColor, promptText){ elem.addEventListener("change", function(){     if (document.activeElement == elem && elem.value==promptText){         elem.value='';         elem.style.color = onColor;     }     else if (elem.value==''){         elem.value=promptText;         elem.style.color = offColor;     } }); elem.addEventListener("blur", function(){     if (document.activeElement == elem && elem.value==promptText){         elem.value='';         elem.style.color = onColor;     }     else if (elem.value==''){         elem.value=promptText;         elem.style.color = offColor;     } }); elem.addEventListener("focus", function(){     if (document.activeElement == elem && elem.value==promptText){         elem.value='';         elem.style.color = onColor;     }     else if (elem.value==''){         elem.value=promptText;         elem.style.color = offColor;     } }); elem.value=promptText; elem.style.color=offColor; } 

Use like this:

setVolatileBehaviour(document.getElementById('yourElementID'),'black','gray','Name'); 

回答7:

This works:

Note: You can change the placeholder, id and type value to "email" or whatever suits your need.

More details by W3Schools at:http://www.w3schools.com/tags/att_input_placeholder.asp

But by far the best solutions are by Floern and Vivek Mhatre ( edited by j0k )

I have a code snippet below, that is a typical web page.

.Submit {     background-color: #008CBA;     border: 3px;     color: white;     padding: 8px 26px;     text-align: center;     text-decoration: none;     display: inline-block;     font-size: 16px; } div {   background-color: yellow;   }

      
Some functions may not work, such as the css ect.   
First Name:
Surname:
Email:
Password:
Submit                  

回答8:

You can use Floern's solution. You may also want to disable the input while you set the color to gray. http://www.w3schools.com/tags/att_input_disabled.asp

文章来源: HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?