如何使HTML文本框显示空白时的提示？

我希望我的网页上的搜索框以灰色斜体显示"搜索"一词.当框接收焦点时,它应该看起来像一个空文本框.如果其中已有文本,则应正常显示文本(黑色,非斜体).这将有助于我通过删除标签来避免混乱.

顺便说一句,这是一个页面上的Ajax搜索,所以它没有按钮.

如果您很高兴只为新浏览器提供此功能,另一个选择是使用HTML 5的占位符属性提供的支持:

在没有任何样式的情况下,在Chrome中看起来像:

您可以在此处和使用CSS的HTML5占位符样式中尝试演示.

请务必检查此功能的浏览器兼容性.3.7中添加了对Firefox的支持.Chrome很好.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.hint {
    color: grey;
}