HTML5 输入类型占位符在 IE 中不起作用

Posted 2023-03-05

【中文标题】HTML5 输入类型占位符在 IE 中不起作用

【英文标题】：HTML5 input type placeholder is not working in IE

【发布时间】：2013-08-06 12:22:36

【问题描述】：

我正在为我的一个项目使用 html5。在那里我使用输入占位符属性来显示一些默认文本。它在 IE 中不起作用。有什么解决办法吗？

【问题讨论】：

Input placeholders for Internet Explorer的可能重复

【参考方案1】：

在 IE 10 之前不支持占位符。

http://caniuse.com/#feat=input-placeholder

您可以在 IE 中使用polyfill 来支持它。

【讨论】：

是的，我知道它不受支持。我们可以在 java-script 中编写一些函数来实现这一点吗？

@DeepakBiswal 我回答了这个问题，您的问题确实应该指出您知道缺乏支持。

我明白了。我已经编写了一个自定义函数，现在可以正常工作了。

【参考方案2】：

请参阅此线程上的最佳答案，因为它有一个很好的解释： Input placeholders for Internet Explorer

【参考方案3】：

旧版本的 IE 不支持 html 占位符。因此，您需要使用像Placeholder.js 这样的javascript 解决方案。它会自动检测输入元素中的占位符属性，并利用跨浏览器解决方案来显示它们。

【参考方案4】：

使用jQuery placeholder。在 Internet Explorer 10 之前，标准 HTML5 声明不支持 HTML5 占位符。

【讨论】：

w3schools 通常是不准确的、简化的和误导的，不应该作为参考传播（谷歌已经这样做了）。 w3fools.com

我知道。我建议他以轻松的方式。谢谢你的提示。

【参考方案5】：

如果您在项目中使用 javascript，则可以添加此代码和平，它将通过 javascript 为您的输入提供一个占位符。

function supports_input_placeholder() 
        var i = document.createElement('input');
        return 'placeholder' in i;
    

if (!supports_input_placeholder()) 
    var fields = document.getElementsByTagName('INPUT');
    for (var i = 0; i < fields.length; i++) 
        if (fields[i].hasAttribute('placeholder')) 
            fields[i].defaultValue = fields[i].getAttribute('placeholder');
            fields[i].onfocus = function ()  if (this.value == this.defaultValue) this.value = ''; 
            fields[i].onblur = function ()  if (this.value == '') this.value = this.defaultValue; 
        
    

【讨论】：

是的，没错。但是，当您发布表单时，您还必须在服务器端检查，因为它会根据上面的代码具有一些价值。

@DeepakBiswal 带有属性placeholder 的输入并不暗示任何类型的服务器端活动：上面的代码将采用任何已作为placeholder 属性放置的内容，并使该行为在非- 支持的浏览器。它解决了你的问题！

【参考方案6】：

试试Placeholders.js

它重量轻，在 IE 6 中也能很好地工作

【参考方案7】：

另一种选择是在 IE

<!--[if lt IE 10]><style>.show-iedisplay:block;</style><![endif]-->