Internet Explorer 的输入占位符

javascript html internet-explorer placeholder

2022-08-30 01:49:55

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

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

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

此方法的缺点是占位符文本位于输入字段中。因此：

脚本无法轻松检查输入字段是否为空
服务器端处理必须检查默认值，以便不将占位符插入到数据库中。

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

答案 1

在查看HTML5 Cross Browser Polyfills的“Web Forms：input placeholder”部分时，我看到的是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>

那里还有其他垫片，但我没有全部查看它们。其中之一，占位符.js，将自己宣传为“没有依赖项（因此不需要包含jQuery，这与大多数占位符polyfill脚本不同）。”

编辑：对于那些对“如何”那个“什么”更感兴趣的人，如何创建一个高级HTML5占位符polyfill，它介绍了创建一个jQuery插件的过程。

此外，请参阅在 IE10 中将占位符保持在焦点上，以获取有关占位符文本如何在 IE10 焦点上消失的注释，这与 Firefox 和 Chrome 不同。不确定是否有解决此问题的方法。

答案 2

在我的经验中，最好的一个是 https://github.com/mathiasbynens/jquery-placeholder（html5please.com 推荐）。http://afarkas.github.com/webshim/demos/index.html 在其更广泛的polyfills库中也有一个很好的解决方案。