IE 不支持占位符属性。有什么建议？答案

【问题标题】：Placeholder attribute not supported in IE. Any suggestions?IE 不支持占位符属性。有什么建议？
【发布时间】：2011-10-14 09:40:30
【问题描述】：

你们都用什么来支持浏览器中的占位符属性？

目前，正在使用：

https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

也试过这个插件没用：

https://github.com/danbentley/placeholder

但它似乎不适用于 IE...更具体地说是 IE 8。还有其他建议/替代方案吗？

我现在应该忘记占位符属性吗？

【问题讨论】：

如果 IE8 支持是基本的，那么，是的，您应该忘记它不支持的功能。如果占位符对您的用户来说很好但不是基本的，那么使用它们并且不用担心 IE8。
如果它们是基本的，那么你用错了。提示绝不应该是理解输入的基本要求。
您找到解决方案了吗？
不完全，还在寻找
这是迄今为止我见过的最好的占位符插件。 敲木头 click here to see demo & download

标签： jquery internet-explorer html

【解决方案1】：

你说得对，IE8 不支持placeholder 属性。 placeholder 是 HTML5 规范的一部分，IE8 在 HTML5 出现之前很久就发布了。

无缝处理的最佳方法是使用Modernizr之类的工具来检测浏览器是否支持占位符功能，如果不支持则运行JS polyfill脚本。

if(!Modernizr.input.placeholder) {
    //insert placeholder polyfill script here.
}

有许多占位符 polyfill 脚本可供下载。选择一个使用placeholder 属性的选项，这样您只需在一个位置为所有浏览器定义占位符字符串。这是您可以尝试的一个：http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

希望对您有所帮助。

【讨论】：

这里的问题是，即使是 JS polyfill 脚本似乎也无法与 IE 一起使用
另一个很好的资源，在“占位符”部分有一个链接列表：github.com/Modernizr/Modernizr/wiki/…
我认为第一行有一两个错字：if(!Modernizr.input.placeholder) {
@rwalter - 是的。我会修复它。 :) （顺便说一句，如果你发现这些错别字，你也可以自己修复它们；Stackoverflow 鼓励进行建设性的编辑）
您仍然需要在此处添加!！实际上，我确实尝试过对其进行编辑，但由于某种原因，SO 不允许我这样做——这与没有做出足够的改变有关。

【解决方案2】：

这是直接来自我的项目的代码，它在 chrome 中本机工作并在 IE8 中使用 polyfill...这里有一个用于测试的警报，显示何时调用 polyfill。您需要加载modernizr 作为使用此代码的先决条件，但您的<head> 部分中包含一个简单的脚本即可。

<script type="text/javascript">
    $('document').ready(function () {
        if (!Modernizr.input.placeholder) {
            $('[placeholder]').focus(function() {
                var input = $(this);
                if (input.val() == input.attr('placeholder')) {
                    input.val('');
                    input.removeClass('placeholder');
                }
            }).blur(function() {
                var input = $(this);
                if (input.val() == '' || input.val() == input.attr('placeholder')) {
                    input.addClass('placeholder');
                    input.val(input.attr('placeholder'));
                   }
            }).blur();

            $('[placeholder]').parents('form').submit(function() {
                $(this).find('[placeholder]').each(function() {
                    var input = $(this);
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                })
            });

            alert("no place holders");
        }
    });
</script>

【讨论】：

如果我们在 javascript 中使用占位符值，这会带来问题。我们将得到文本而不是实际的空字符串。
如果文本值等于占位符值，我在项目中为防止这种情况所做的事情是在提交事件中，我将值设置为空。它仍然有点 hacky，但不幸的是，有时支持旧浏览器往往会这样。

【解决方案3】：

placeholder 属性有很多 polyfill 脚本。这里是one that seems to work well。

只要记住在你的 JS 代码中调用 $('input, textarea').placeholder();，并可能添加一个 CSS 规则，例如。 .placeholder { color: #aaa }.

【讨论】：

【解决方案4】：

在查看了所有其他答案和示例后，我发现了一些问题。我编写了自己的解决方案来解决这些问题，并决定将其发布在这里。我的代码将正确处理其他解决方案似乎有问题的两件事是：

如果您确实想输入占位符中包含的文本作为值，我的代码不会假定这是占位符并丢弃您的输入。
如果您在 IE 中按下刷新按钮，它不会使用占位符值自动填充字段。

包括Modernizr和JQuery如下：

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="modernizr-2.6.2.js"></script>

添加一些 CSS 例如：

<style type="text/css" media="all">
.placeholder {
    color: #aaa;
}
</style>

那么你需要的主要代码是：

<script type="text/javascript">

$(document).ready(function() {

    // Only do anything if the browser does not support placeholders
    if (!Modernizr.input.placeholder) {

        // Format all elements with the placeholder attribute and insert it as a value
        $('[placeholder]').each(function() {
            if ($(this).val() == '') {
                $(this).val($(this).attr('placeholder'));
                $(this).addClass('placeholder');
            }
            $(this).focus(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                    $(this).removeClass('placeholder');
                }
            }).blur(function() {
                if($(this).val() == '') {
                    $(this).val($(this).attr('placeholder'));
                    $(this).addClass('placeholder');
                }
            });
        });

        // Clean up any placeholders if the form gets submitted
        $('[placeholder]').parents('form').submit(function() {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                }
            });
        });

        // Clean up any placeholders if the page is refreshed
        window.onbeforeunload = function() {
            $('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
                    $(this).val('');
                }
            });
        };
    }
});

</script>

【讨论】：

【解决方案5】：

事实上，截至 2011 年 10 月 19 日，IE 都不支持占位符属性。我已经在 7、8 和 9 中对其进行了测试，但似乎没有一个能够识别它。你会认为 ie9，看到它应该如何支持 css3 和 html5 会解决这个问题，但事实并非如此。

作为一个不漂亮但可以完成工作的简单解决方法，您可以使用一些像这样的 javascript：

<input type="text" value="Enter ZIP"
  onfocus="if(this.value == 'Enter ZIP'){this.value = '';}" />

【讨论】：

不会返回值onblur

【解决方案6】：

这是我在我的一个项目中使用的。唯一的问题是我只需要一个元素上的占位符，因此它可能不适用于您的情况。但只是为了了解代码的简单程度：

(function(){
    var nameInput = document.getElementById('your-id-here');
    var placeHolderSupport = ("placeholder" in document.createElement("input"));
    if( !placeHolderSupport )
    {
        //show hint in gray
        var placeholder = nameInput.getAttribute('placeholder');
        nameInput.onfocus = function(){ if(this.value==placeholder){this.value='';this.className='';} };
        nameInput.onblur  = function(){ if(this.value==''){this.value=placeholder;this.className='placeholder';} };
        nameInput.onblur();
    }
})()

【讨论】：