如何使用 JavaScript 在 <input> 中显示“建议”？答案

【问题标题】：How to display a "suggestion" inside an <input> with JavaScript?如何使用 JavaScript 在 <input> 中显示“建议”？
【发布时间】：2012-09-26 18:40:30
【问题描述】：

我正在建立一个注册页面。我想让它像 SO 那样：你在一个字段中看到文本“John Smith（可选）”，当你开始输入时，文本消失了。你如何在 JavaScript 中做到这一点？（不要怪我什么都没尝试，我是JS菜鸟）

可选：注意建议是灰色的，但输入的文本变成黑色。我也想要那种效果。

【问题讨论】：

在右上角的那个小搜索框中搜索placeholder。
可能的欺骗：stackoverflow.com/questions/3446269/…
@PatrickM：不，因为我没有使用 jQuery。
@GiulioMuscarello 很有趣。您正在使用 js 库/框架吗？（为什么/为什么不呢？）完全从 javascript 中完成这项工作具有挑战性。我下面帖子中的 jQuery 方法可能会适应不使用 jQuery，但它会长 4-10 倍...... HTML5 路由对你来说可以接受吗？您需要支持较旧的浏览器吗？可以用modernizr.js吗？
@PatrickM 我不使用 jQuery 主要是因为我现在使用云托管解决方案（这是我的第一个网站 LOL），所以我在服务器上没有管理员权限：所以，我无法安装库、框架、插件等。关于HTML5，我只需要支持主流浏览器，带有标准选项（javascript on）。

标签： javascript styles

【解决方案1】：

Placeholder demo

<input type="text" name="email" placeholder="E-mail" />

如果您愿意，也可以使用 css 设置占位符的样式

【讨论】：

【解决方案2】：

除了 HTML5 placeholder 的东西和实现这一点的所有其他方法之外，我最喜欢使用 javascript（html5 之前）执行此操作的方法是以下博客文章：

http://kyleschaeffer.com/best-practices/input-prompt-text/

之所以如此出色，是因为使用了现有的title 属性，这对于屏幕阅读器（纯文本浏览器、文本到语音、视障人士的 ADA 合规性等）来说也是一个不错的功能，如果您没有使用具有显式 for 和 id 属性匹配的标签。

但是，在我看来，HTML5 和 Modernizer 已经完全取代了对这个功能的需求。

【讨论】：