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

问题描述

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

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

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

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.

推荐答案

在查看Web Forms：input placeholder一个href =https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills =nofollow noreferrer> 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)."

编辑：对于那些对how =http://www.flippinawesome.org/2013/04/15/advanced-placeholder-polyfill/ =nofollow noreferrer>如何创建一个高级的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中保留占位符重点，以便了解如何通过与Firefox和Chrome不同的IE10重点放置占位符文本。不知道这个问题是否有解决方案。

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屋！