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;
}

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

Initial State

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

After Onblur of text field

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

FYI - 我怀疑文本最初不会出现，因为我的模态最初是隐藏的。如果是这样的话，我怎么能解决这个问题？

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

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

Answer 2

事实证明我的问题与代码本身完全无关，但是代码的展示位置存在问题。

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

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

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

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

2 个答案: