输入Internet Explorer的占位符

Question

输入Internet Explorer的占位符

HTML5 placeholder在input元素上引入了属性，允许显示灰色的默认文本。

可悲的是，包括IE 9在内的Internet Explorer不支持它。

那里已经有一些占位符模拟器脚本了。它们通常通过将默认文本放入输入字段，将其设置为灰色并在您聚焦输入字段后再次将其删除来工作。

这种方法的缺点是占位符文本在输入字段中。从而：

1. 脚本无法轻松检查输入字段是否为空

2. 服务器端处理必须检查默认值，以便不将占位符插入数据库。

我想有一个解决方案，其中占位符文本不在输入本身。

Answer 1

在查看HTML5 Cross Browser Polyfills的“Web窗体：输入占位符”部分时，我看到的是jQuery-html5-placeholder。我尝试使用IE9&nbsp;进行演示，看起来它<input>用一个跨度包装你的东西，并用占位符文本覆盖一个标签。<label>Text:&nbsp;&nbsp;<span&nbsp;style="position:&nbsp;relative;"> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;id="placeholder1314588474481"&nbsp;name="text"&nbsp;maxLength="6"&nbsp;type="text"&nbsp;placeholder="Hi&nbsp;Mom"> &nbsp;&nbsp;&nbsp;&nbsp;<label&nbsp;style="font:&nbsp;0.75em/normal&nbsp;sans-serif;&nbsp;left:&nbsp;5px;&nbsp;top:&nbsp;3px;&nbsp;width:&nbsp;147px;&nbsp;height:&nbsp;15px;&nbsp;color:&nbsp;rgb(186,&nbsp;186,&nbsp;186);&nbsp;position:&nbsp;absolute;&nbsp;overflow-x:&nbsp;hidden;&nbsp;font-size-adjust:&nbsp;none;&nbsp;font-stretch:&nbsp;normal;"&nbsp;for="placeholder1314588474481">Hi&nbsp;Mom</label> &nbsp;&nbsp;</span></label>那里还有其他垫片，但我没有看到它们。其中之一，Placeholders.js，宣称自己是“没有依赖关系（所以不需要包含jQuery，不像大多数占位符polyfill脚本）。”编辑：对于那些对“如何”更感兴趣的人，如何创建一个高级HTML5占位符polyfill，它遍历创建执行此操作的jQuery插件的过程。此外，请参阅IE10中的占位符保持焦点，以评论占位符文本在IE10上的焦点消失，这与Firefox和Chrome不同。不确定是否有解决此问题的方法。

Answer 2

这个polyfill的作者声称它“几乎可以在你能想象的任何浏览器中工作”，但根据IE11的评论不是这样，但IE11本身也支持，大多数现代浏览器也是如此Placeholders.js是我见过的最好的占位符polyfill，是轻量级的，不依赖于JQuery，涵盖其他旧版浏览器（不仅仅是IE），还有hide-on-input和run-once占位符选项。