Internet Explorer 缺乏占位符支持,特别是密码字段

Posted

技术标签:

【中文标题】Internet Explorer 缺乏占位符支持,特别是密码字段【英文标题】:Internet Explorer lack of placeholder support, specifically password fields 【发布时间】:2012-09-05 09:40:42 【问题描述】:

好的,所以为了克服 IE 不支持 html5 的 Placeholder 属性,我编写了一些循环输入的 JS,并将输入的值设置为不支持它的浏览器的占位符属性值。现在这工作正常,但是在密码字段上,无论值是什么,都会显示为点/项目符号以掩盖密码。

现在我可以采取什么措施和方法来解决这个问题?

在输入[type="password"] 上具有占位符样式效果?

【问题讨论】:

你可以多写一些 javascript :p @SaadImran。只是想知道如何处理它...... 您可以,嗯,将密码字段的背景颜色设置为透明并在其下方放置一个白色的DIV,以显示占位符... @benhowdle89 我会选择 valentinas 选项中的选项 1。 @SaadImran。其实我只是试过了,不行。不确定 IE,但在某些浏览器中,出于安全原因,不允许 JS 更改该属性,所以要走的路是将其显示在元素的外侧,看看 Sathish 的答案和这个问题:***.com/questions/8628522/… 【参考方案1】:

在查看HTML5 Cross Browser Polyfills 的“Web 表单:输入占位符”部分时,我看到的是jQuery-html5-placeholder。

我在 IE9 中尝试了 demo,它看起来像是用跨度包裹了您的 <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>

那里还有其他的垫片,但我没有全部看。

引用自Input placeholders for Internet Explorer

【讨论】:

以上是关于Internet Explorer 缺乏占位符支持,特别是密码字段的主要内容,如果未能解决你的问题,请参考以下文章

占位符 Internet Explorer 11 未显示

占位符不适用于 Internet Explorer

占位符属性在 Internet Explorer 中不起作用

占位符文本仅在 Internet Explorer 中可见

为 Internet Explorer 设置占位符? [复制]

在 Internet Explorer 中制作隐形“占位符”很热门?