html - 如何在 firefox 和其他不支持 html5 标签选项的浏览器中获取占位符文本？

Question

这适用于 Chrome 和任何其他支持 HTML5 占位符文本的浏览器

<input id="name" name="name"  type="text" placeholder="Please enter your name..." required /> <br />

但是，它在 3.5 及更早版本的 Firefox 中不起作用，显然在 IE8 和其他浏览器中也不起作用。

我如何实现同样的事情(最好是在 HTML/CSS 中——如果不是我愿意接受建议)，以支持所有旧的浏览器？如果不是每个浏览器，至少是 Firefox 和 IE。

Safari 和 Chrome 已经支持它(或者最新版本)。

谢谢。

Answer 1

总有一天我会抽出时间来正确记录这一点，但请看这个例子:http://dorward.me.uk/tmp/label-work/example.html

简而言之——位置a <label>透明下<input>使用 <div>提供背景颜色和边框。

然后使用JS根据焦点判断标签是否可见。

当 JS 不可用时应用不同的样式来将标签定位在元素旁边。

不同于使用 value ，这不会使仅显示聚焦内容的设备(例如屏幕阅读器)无法访问内容，并且也适用于 password 的输入类型。