另一种选择，如果您很高兴仅对较新的浏览器具有此功能，则使用 HTML 5 的占位符属性提供的支持：

<input name="email" placeholder="Email Address">

在没有任何样式的情况下，在 Chrome 中这看起来像：

您可以在此处和HTML5 Placeholder Styling with CSS 中尝试演示。

请务必检查此功能的浏览器兼容性。在 3.7 中添加了对 Firefox 的支持。铬很好。Internet Explorer 仅在 10 中添加了支持。如果您的目标浏览器不支持输入占位符，则可以使用名为jQuery HTML5 Placeholder的 jQuery 插件，然后只需添加以下 JavaScript 代码即可启用它。

$('input[placeholder], textarea[placeholder]').placeholder();

这被称为文本框水印，它是通过 JavaScript 完成的。

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-Compatible).aspx

或者，如果您使用 jQuery，则有更好的方法：

• http://digitalbush.com/projects/watermark-input-plugin/
• 或code.google.com/p/jquery-watermark

您可以使用HTML 中的属性设置占位符（浏览器支持）。该和可以用CSS改变（虽然浏览器的支持是有限的）。placeholderfont-stylecolor

input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
 color:gray;
 font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
 color:gray;
 font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
 color:gray;
 font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
 color:gray;
 font-style:italic;
}

<input placeholder="Search" type="search" name="q">

您可以添加和删除特殊的 CSS 类并使用 JavaScript修改输入值onfocus/ onblur：

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

然后在 CSS 中使用您想要的样式指定一个提示类，例如：

input.hint {
    color: grey;
}

最好的方法是使用某种 JavaScript 库（如jQuery或YUI）连接您的 JavaScript 事件，并将您的代码放在外部 .js 文件中。

但是如果你想要一个快速而肮脏的解决方案，这就是你的内联 HTML 解决方案：

<input type="text" id="textbox" value="Search"
    onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}" 
    onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />

更新：添加了要求的着色材料。