2

そのため、プレースホルダー属性をIE9以下で機能させようとしています。ただし、奇妙な動作が発生しています (以下のスクリーンショットを参照)。

このウェブサイトを見つけて、以下の 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;
}

私のウェブサイトは、フォームを含むモーダルを開きます。ただし、モーダルを最初に開くと、プレースホルダー テキストは表示されません。

初期状態

ただし、テキスト フィールドをクリックしてからテキスト フィールドの外をクリックすると、プレースホルダー テキストが表示されます。

テキストフィールドのオンブラー後

モーダルを開いた直後にテキストが表示されるようにしたいと思います。それだけです 本当に...

参考までに、モーダルが最初に非表示になっているため、テキストが最初に表示されない可能性があると思います。その場合、どうすれば修正できますか？

注:プラグインが存在することは知っています。プラグインを使用したくありません。

4

2 に答える 2

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");
于 2013-09-23T16:14:44.310 に答える
1

私の問題はコード自体とはまったく関係がなく、コードの配置に問題があることがわかりました。

JS コードをindex.htmlファイルに直接配置しましたが、別のemailmodal.jsファイル内に配置する必要がありました。

問題は、モーダルが最初は非表示になっているという事実だったと思います。そのため、JS を実行すると、これらのテキスト フィールドはまだ存在しません。モーダルを開いてテキストフィールドをクリックするまで、それらのフィールドが突然「存在」することはありません。

私が間違っている場合は修正できますが、私の問題は現在修正されています。

于 2013-09-23T21:22:27.623 に答える