HTML / CSS使文本变灰的文本框，当我点击进入信息，消失，如何？
如何制作一个灰色内容的文本框，当我点击它来input文本时，灰色部分，它消失，并允许我input所需的文本？
例：
“名字”文本框。 “First Name”字样在文本框内灰显，当我点击时，那些字就消失了，我在其中写下了我的名字。
HTML：
<input type="text" name="firstname" title="First Name" style="color:#888;" value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" /> 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"; } }
编辑：这实际上更容易。
Chrome，Firefox，IE10和Safari支持html5占位符属性
<input type="text" placeholder="First Name:" />
为了获得更多的跨浏览器的解决scheme，你需要使用一些JavaScript，有很多预制解决scheme，虽然我不知道任何closures我的头顶。
使用HTML5，您可以使用以下方式进行本地化： <input name="first_name" placeholder="First Name">
（IE）不支持所有的浏览器
这可能工作：
<input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value='':null">
否则，如果您使用jQuery，则可以使用.focus和.css更改颜色。
如果您只针对HTML5，则可以使用：
<input type="text" id="firstname" placeholder="First Name:" />
对于非HTML5浏览器，我将通过使用jQuery来构buildFloern的答案，并使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); }); })
function：
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; }
最简单的方法是直接将下面的代码作为附加属性添加到要更改的inputtypes中。
onfocus="if(this.value=='Search')this.value=''" onblur="if(this.value=='')this.value='Search'"
请注意：将文字“search”更改为“去”或任何其他文字，以满足您的要求。
这是一个精心制作的版本，可以帮助你理解
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; }
像这样使用：
setVolatileBehaviour(document.getElementById('yourElementID'),'black','gray','Name');
这工作：
<input type="text" id="firstname" placeholder="First Name" />
注意：您可以将占位符，标识和types值更改为“电子邮件”或任何适合您需要的内容。
W3Schools的更多详细信息： http : //www.w3schools.com/tags/att_input_placeholder.asp
但迄今为止最好的解决scheme是Floern和Vivek Mhatre（由j0k编辑）
我有一个下面的代码片断 ，这是一个典型的网页。
.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="john.doe@example.com" /> <p>Password:<input type="email" id="email" placeholder="john.doe@example.com" /> <br /><button class="submit">Submit</button> </center> </div>
你可以使用Floern的解决scheme。 您也可以在将颜色设置为灰色时禁用input。 http://www.w3schools.com/tags/att_input_disabled.asp
