javascript 占位符和 IE != BFF（占位符和 IE9 不工作）

Placeholder and IE != BFFs (Placeholder and IE9 not working)

提问by Keven

So, I'm trying to get the placeholder attribute to work in IE9 and below. However, I'm getting odd behavior (see screenshots below).

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

I found this websiteand decided to use the JS code below:

我找到了这个网站，并决定使用下面的 JS 代码：

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:

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:

CSS：

.hasPlaceholder {
    color: #999;
}

My website opens up a modal with a form in it. However, when the modal is first opened, none of the placeholder text shows up:

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

However, if I click into the text field, then click out of the text field, the placeholder text shows up.

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

I'd like the text to show up immediately once the modal has been opened. That's all really...

我希望文本在打开模态后立即显示。这一切真的...

FYI-I suspect that it's possible the text doesn't initially appear because my modal is hidden initially. How could I fix that if that is the case?

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

NOTE:I KNOW THAT PLUGINS EXIST. I DON'T WANT TO USE PLUGINS.

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

采纳答案by Keven

It turns out my problem was completely unrelated to the code itself, but was a problem with the placementof the code.

结果证明我的问题与代码本身完全无关，而是代码放置的问题。

I placed the JS code directly into the index.htmlfile, when I should have placed it inside of a different emailmodal.jsfile.

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

I think the issue was the fact that the modal is initially hidden, therefore, when the JS runs, those text fields don't exist yet. It's not until I open the modal and click into the text field, that those fields suddenly "exist".

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

You guys can correct me if I'm wrong, but my problem is fixed now.

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

回答by Riskbreaker

Change your jquery to this:

将您的 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);

Then make the function work:

然后使函数工作：

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