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

javascript html

2022-08-30 00:56:18

我希望网页上的搜索框以灰色斜体显示“搜索”一词。当该框获得焦点时，它看起来应该就像一个空文本框。如果其中已有文本，则应正常显示文本（黑色，非斜体）。这将通过删除标签来帮助我避免混乱。

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

答案 1

如果您愿意将此功能仅用于较新的浏览器，另一种选择是使用HTML 5的占位符属性提供的支持：

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

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

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

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

答案 2

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

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