HTML/CSS 制作一个带有灰色文本的文本框，并在我点击输入信息时消失，如何？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4681036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?
提问by Ibn Ali al-Turki
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.
“名字”文本框。“名字”字样在变灰的文本框中，当我单击时，这些字词消失，我在其中写下我的名字。
采纳答案by Floern
This answer illustrates a pre-HTML5 approach. Please take a look at Psytronic's answerfor a modern solution using the placeholderattribute.
此答案说明了 HTML5 之前的方法。请查看Psytronic对使用该placeholder属性的现代解决方案的回答。
HTML:
HTML：
<input type="text" name="firstname" title="First Name" style="color:#888;"
value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
JavaScript:
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"; }
}
回答by Psytronic
Chrome, Firefox, IE10 and Safari support the html5 placeholder attribute
Chrome、Firefox、IE10 和 Safari 支持 html5 placeholder 属性
<input type="text" placeholder="First Name:" />
<input type="text" placeholder="First Name:" />
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.
为了获得更多跨浏览器的解决方案，您需要使用一些 javascript，那里有很多预制的解决方案，尽管我不知道有什么。
回答by David Houde
With HTML5, you can do this natively with: <input name="first_name" placeholder="First Name">
使用 HTML5，您可以通过以下方式在本机执行此操作： <input name="first_name" placeholder="First Name">
This is not supported with all browsers though (IE)
并非所有浏览器都支持此功能（IE）
This may work:
这可能有效：
<input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value='':null">
Otherwise, if you are using jQuery, you can use .focus and .css to change the color.
否则，如果您使用 jQuery，则可以使用 .focus 和 .css 来更改颜色。
回答by Jay
If you're targeting HTML5 only you can use:
如果您仅针对 HTML5，则可以使用：
<input type="text" id="firstname" placeholder="First Name:" />
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.
对于非 HTML5 浏览器，我将通过使用 jQuery 来构建 Floern 的答案并使 javascript 不显眼。我还将使用一个类来定义模糊属性。
$(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:
CSS：
.blurredDefaultText {
color:#888 !important;
}
回答by PiggyPlex
This works:
这有效：
<input type="text" id="firstname" placeholder="First Name" />
Note:You can change the placeholder, id and type value to "email" or whatever suits your need.
注意：您可以将占位符、id 和类型值更改为“电子邮件”或任何适合您需要的值。
More details by W3Schools at:http://www.w3schools.com/tags/att_input_placeholder.asp
W3Schools 提供的更多详细信息，请访问：http: //www.w3schools.com/tags/att_input_placeholder.asp
But by far the best solutions are by Floern and Vivek Mhatre ( edited by j0k )
但到目前为止最好的解决方案是 Floern 和 Vivek Mhatre（由 j0k 编辑）
I have a code snippetbelow, 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;
}<div>
<center>
<p>Some functions may not work, such as the css ect.
<p>First Name:<input type="text" id="firstname" placeholder="John" />
<p>Surname:<input type="text" id="surname" placeholder="Doe" />
<p>Email:<input type="email" id="email" placeholder="[email protected]" />
<p>Password:<input type="email" id="email" placeholder="[email protected]" />
<br /><button class="submit">Submit</button> </center>
</div>回答by Vivek Mhatre
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.
请注意：将文本“Search”更改为“go”或任何其他文本以满足您的要求。
回答by UltraInstinct
This is an elaborate version, to help you understand
这是一个精心制作的版本，以帮助您理解
function setVolatileBehavior(elem, onColor, offColor, promptText){ //changed spelling of function name to be the same as name used at invocation below
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:
像这样使用：
setVolatileBehavior(document.getElementById('yourElementID'),'black','gray','Name');
回答by stoneMonkey77
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
您可以使用 Floern 的解决方案。您可能还想在将颜色设置为灰色时禁用输入。 http://www.w3schools.com/tags/att_input_disabled.asp
