javascript - 占位符和 IE != BFF(占位符和 IE9 不工作)

Question

因此，我试图让占位符属性在 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;
}

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

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

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

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

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

Answer 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");