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

I found this website and decided to use the JS code below:

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

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.

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

I found this website and decided to use the JS code below:

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

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.

• javascript
• html
• css
• internet-explorer
• placeholder

Share Improve this question Follow edited Sep 23, 2013 at 16:14 neuquen asked Sep 23, 2013 at 15:57 neuquenneuquen 4,1891616 gold badges6363 silver badges8080 bronze badges 3

• Chain .blur() on the end after .blur(function () {/* ... */}), also, why aren't you caching $(this)? – Paul S. Commented Sep 23, 2013 at 16:04
• @PaulS. I'm afraid that didn't work... – neuquen Commented Sep 23, 2013 at 16:09
• @PaulS. I suppose I could, but I'm using borrowed code, so I've done very few modifications to it. If by caching this I can store the variable and have it injected into the modal, then I could see it's usefulness. – neuquen Commented Sep 23, 2013 at 16:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Change your jquery to this:

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

It turns out my problem was pletely unrelated to the code itself, but was a problem with the placement of the code.

I placed the JS code directly into the index.html file, when I should have placed it inside of a different emailmodal.js file.

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".

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