问如何使HTML文本框在为空时显示提示？

EN

另一种选择是，如果您乐于将此功能仅用于较新的浏览器，则可以使用HTML5的占位符属性提供的支持：

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

在没有任何样式的情况下，在Chrome中如下所示：

​

​

您可以在here和中尝试演示。

请务必检查browser compatibility of this feature。Firefox中的支持是在3.7中添加的。Chrome很好。如果你的目标浏览器不支持输入占位符，你可以使用一个名为jQuery HTML5 Placeholder的jQuery插件，然后只需添加以下JavaScript代码来启用它。

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

这就是所谓的textbox水印，它是通过JavaScript实现的。

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

或者，如果你使用jQuery，一种更好的方法：

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

您可以使用中的 (browser support)来设置placeholder attribute占位符。font-style和color可以是changed with CSS (尽管浏览器支持有限)。

​

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">

​