占位符和 IE ！= BFF（占位符和 IE9 不起作用）答案

【问题标题】：Placeholder and IE != BFFs (Placeholder and IE9 not working)占位符和 IE ！= BFF（占位符和 IE9 不起作用）
【发布时间】：2013-09-28 14:45:02
【问题描述】：

所以，我试图让占位符属性在 IE9 及更低版本中工作。但是，我的行为很奇怪（请参见下面的屏幕截图）。

找到this website，决定使用下面的JS代码：

JS：

    // Checks browser support for the placeholder attribute
    jQuery(function() {
    jQuery.support.placeholder = false;
    test = document.createElement('input');
    if('placeholder' in test) jQuery.support.placeholder = true;
    });

    // Placeholder for IE
    $(function () {
        if(!$.support.placeholder) { 

            var active = document.activeElement;
            $(':text, textarea').focus(function () {
                if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                    $(this).val('').removeClass('hasPlaceholder');
                }
            }).blur(function () {
                if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                    $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
                }
            });
            $(':text, textarea').blur();
            $(active).focus();
            $('form').submit(function () {
                $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
            });
        }  

    });

HTML：

    <p>
        <label>To: </label>
        <input type="text"  id="toEmail" placeholder="Recipient's Email Address" />
    </p>       

    <p>
        <label>From:</label>
        <input type="text" id="fromName" placeholder="Your Name" />
    </p>

    <p>
        <label>From: </label>
        <input type="text" id="fromEmail" placeholder="Your Email Address" />
    </p>

    <p>
        <label>Message:</label>
        <textarea rows="5" cols="5" id="messageEmail"></textarea>
    </p>

CSS：

.hasPlaceholder {
    color: #999;
}

我的网站打开了一个带有表单的模式。但是，当第一次打开模式时，没有显示占位符文本：

但是，如果我单击文本字段，然后单击文本字段外，则会显示占位符文本。

我希望在打开模式后立即显示文本。真的是这样……

仅供参考-我怀疑文本最初可能没有出现，因为我的模式最初是隐藏的。如果是这种情况，我该如何解决？

注意：我知道存在插件。我不想使用插件。

【问题讨论】：

链.blur()在.blur(function () {/* ... */})之后，还有，你为什么不缓存$(this)？
@PaulS。恐怕没有用...
@PaulS。我想我可以，但我使用的是借来的代码，所以我对它做了很少的修改。如果通过缓存this 我可以存储变量并将其注入模态，那么我可以看到它的用处。
$(this).show( '.placeholder' ); //Not working 照它说的做，但它不起作用。我不确定$(this) 应该是什么，或者将类选择器传递给show 应该做什么，但我无法按原样使用该行运行此代码。不确定此评论是否有帮助。
@lemieuxster 是的，那是糟糕的代码。我把它拿出来了。我会在这里拿出来。

标签： javascript html css internet-explorer placeholder

【解决方案1】：

把你的 jquery 改成这样：

; (function ($) {
    $.fn.placehold = function (placeholderClassName) {
        var placeholderClassName = placeholderClassName || "placeholder",
            supported = $.fn.placehold.is_supported();

        function toggle() {
            for (i = 0; i < arguments.length; i++) {
                arguments[i].toggle();
            }
        }

        return supported ? this : this.each(function () {
            var $elem = $(this),
                placeholder_attr = $elem.attr("placeholder");

            if (placeholder_attr) {
                if ($elem.val() === "" || $elem.val() == placeholder_attr) {
                    $elem.addClass(placeholderClassName).val(placeholder_attr);
                }

                if ($elem.is(":password")) {
                    var $pwd_shiv = $("<input />", {
                        "class": $elem.attr("class") + " " + placeholderClassName,
                        "value": placeholder_attr
                    });

                    $pwd_shiv.bind("focus.placehold", function () {
                        toggle($elem, $pwd_shiv);
                        $elem.focus();
                    });

                    $elem.bind("blur.placehold", function () {
                        if ($elem.val() === "") {
                            toggle($elem, $pwd_shiv);
                        }
                    });

                    $elem.hide().after($pwd_shiv);
                }

                $elem.bind({
                    "focus.placehold": function () {
                        if ($elem.val() == placeholder_attr) {
                            $elem.removeClass(placeholderClassName).val("");
                        }
                    },
                    "blur.placehold": function () {
                        if ($elem.val() === "") {
                            $elem.addClass(placeholderClassName).val(placeholder_attr);
                        }
                    }
                });

                $elem.closest("form").bind("submit.placehold", function () {
                    if ($elem.val() == placeholder_attr) {
                        $elem.val("");
                    }

                    return true;
                });
            }
        });
    };

    $.fn.placehold.is_supported = function () {
        return "placeholder" in document.createElement("input");
    };
})(jQuery);

然后让函数工作：

$("input, textarea").placehold("something-temporary");

【讨论】：

感谢新代码。如果我当前的代码不起作用，我会试试这个，但首先我想看看我是否能得到我必须工作的东西。
np 我总是将它与 Modernizr 一起使用，因此它适用于 IE7+ 的占位符

【解决方案2】：

原来我的问题与代码本身完全无关，而是代码的放置问题。

我将 JS 代码直接放在 index.html 文件中，而我应该将它放在不同的 emailmodal.js 文件中。

我认为问题在于模式最初是隐藏的，因此，当 JS 运行时，这些文本字段还不存在。直到我打开模式并单击文本字段，这些字段才突然“存在”。

如果我错了，你们可以纠正我，但我的问题现在已经解决了。

【讨论】：