如何在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

简而言之 - <label>在透明的位置下<input>使用<div>提供背景颜色和边框.

然后使用JS根据聚焦确定标签是否可见.

当JS不可用时,应用不同的样式来将标签放置在元素旁边.

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

Answer 2

我使用这个:https://github.com/danbentley/placeholder
轻量级和简单的jQuery插件.

Answer 3

这是我发现在任何地方工作的最简单的解决方案:

<input id="search" 
   name="search" 
   onblur="if (this.value == '') {this.value = 'PLACEHOLDER';}" 
   onfocus="if (this.value == 'PLACEHOLDER') {this.value = '';}"
/>

用自己的替换PLACEHOLDER.

目前,FF3还不支持"input"元素的"占位符"属性.FF4,Opera11和Chrome8部分支持它,即它们在字段中呈现占位符文本,但是当用户聚焦在字段中时不要删除它,这更糟糕的是根本不支持它.

Answer 4

顺便说一句...如果有人感兴趣...我发现了一个很好的优雅的解决方案，它是一个非常棒的 jQuery 插件。

它实际上是一行 jQuery，一个缩小的 js 插件，以及输入上的一个简单的类名。

http://labs.thesedays.com/projects/jquery/clearfield/

这是我发现的最美丽的东西，仅次于 html 中的“Placeholder”。