输入Internet Explorer的占位符

Question

输入Internet Explorer的占位符HTML5 placeholder在input元素上引入了属性，允许显示灰色的默认文本。可悲的是，包括IE 9在内的Internet Explorer不支持它。那里已经有一些占位符模拟器脚本了。它们通常通过将默认文本放入输入字段，将其设置为灰色并在您聚焦输入字段后再次将其删除来工作。这种方法的缺点是占位符文本在输入字段中。从而：脚本无法轻松检查输入字段是否为空服务器端处理必须检查默认值，以便不将占位符插入数据库。我想有一个解决方案，其中占位符文本不在输入本身。

Answer 1

在查看HTML5 Cross Browser Polyfills的“Web窗体：输入占位符”部分时，我看到的是jQuery-html5-placeholder。

我尝试使用IE9 进行演示，看起来它<input>用一个跨度包装你的东西，并用占位符文本覆盖一个标签。

<label>Text:  <span style="position: relative;">
    <input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
    <label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
  </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占位符选项。