Internet Explorer 的输入占位符 [英] Input placeholders for Internet Explorer

问题描述

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

HTML5 introduced the placeholder attribute on input elements, which allows to display a greyed-out default text.

遗憾的是 Internet Explorer，包括 IE 9 不支持它.

Sadly the Internet Explorer, including IE 9 does not support it.

已经有一些占位符模拟器脚本了.它们的工作方式通常是将默认文本放入输入字段，将其设置为灰色，并在您聚焦输入字段后立即将其删除.

There already are some placeholder simulator scripts out there. They typically work by putting the default-text into the input field, give it a grey color and remove it again as soon as you focus the input field.

这种方法的缺点是占位符文本位于输入字段中.因此:

The drawback of this approach is that the placeholder text is in the input field. Thus:

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

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

I would like to have a solution, where the placeholder text isn't in the input itself.

推荐答案

在查看 HTML5 跨浏览器 Polyfills，我看到的是 jQuery-html5-placeholder.

In looking at the "Web Forms : input placeholder" section of HTML5 Cross Browser Polyfills, one I saw was jQuery-html5-placeholder.

我在 IE9 中尝试了 demo，它看起来像是包裹了您的 <input> 带有一个跨度并用占位符文本覆盖一个标签.

I tried the demo out with IE9, and it looks like it wraps your <input> with a span and overlays a label with the placeholder text.

<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 脚本不同)."

There are also other shims there, but I didn't look at them all. One of them, Placeholders.js, advertises itself as "No dependencies (so no need to include jQuery, unlike most placeholder polyfill scripts)."

对于那些对如何"和什么"更感兴趣的人，如何创建高级 HTML5 占位符 polyfill，其中介绍了创建执行此操作的 jQuery 插件的过程.

For those more interested in "how" that "what", How to create an advanced HTML5 placeholder polyfill which walks through the process of creating a jQuery plugin that does this.

此外，请参阅在 IE10 中保持占位符的焦点，了解如何占位符文本在 IE10 中消失，这与 Firefox 和 Chrome 不同.不确定是否有解决此问题的方法.

Also, see keep placeholder on focus in IE10 for comments on how placeholder text disappears on focus with IE10, which differs from Firefox and Chrome. Not sure if there is a solution for this problem.

这篇关于Internet Explorer 的输入占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！