placeholder is not working in IE9

Question

I am salesforce (SFDC) developer. In my visualforce page for input box I am using placeholder code.

<div class="control-group">
    <label class="control-label visible-desktop" for="first_name">First Name</label>
    <div class="controls">
        <input class="input-block-level" name="First Name" id="first_name" placeholder="First Name" value="" type="text" required="required" autofocus="autofocus" />
    </div>
</div>

I checked in internet for some CSS hack but I didn't find any. I find some javascript hack.

HTML5 Placeholder jQuery Plugin

https://github.com/mathiasbynens/jquery-placeholder

Demo & Examples

http://mathiasbynens.be/demo/placeholder

But I don't want to use jQuery hack or something.

IE9 does support the placeholder attribute. Check the demo page you provided in IE9. There is a message saying the browser natively supports it. — Brainfeeder, Jul 17 '13 at 09:57
You will have to use jQuery, since older browsers just don't support it. — Thew, Jul 17 '13 at 09:58
Apparently some strage thing going on with my IE9, cause it just works. Anyway [this answer](http://stackoverflow.com/a/9109448/1397220) is a non jQuery solution.. — Brainfeeder, Jul 17 '13 at 10:03
@Brainfeeder: IE 9 does ***not*** support the [`placeholder` attribute](http://caniuse.com/#search=placeholder). — gen_Eric, Jul 17 '13 at 15:35
Why do not want to use a jQuery hack? You're using bootstrap, so you should already have jQuery loaded. The only way to make `placeholder` work in IE 9 or below is to use a JavaScript/jQuery solution. There is no other solution. — gen_Eric, Jul 17 '13 at 15:36
@RocketHazmat No it does not. But it does on my laptop (which has IE9 installed..) Maybe I installed some browser plugin and I forgot about it. — Brainfeeder, Jul 18 '13 at 06:41
using the code: 'placeholder' in $('.textbox'), returns true in IE9. — Ben Sewards, Jan 17 '14 at 15:26

DarkMantis · Accepted Answer · 2013-07-22T08:43:11.093

2

As IE9 doesn't support the placeholder attribute, you can do it in Javascript/jQuery like so (quickly written, not tested):

if(navigator.appVersion.match(/MSIE [\d.]+/)){
    var placeholderText = 'Some Placeholder Text';
    $('#first_name').val(placeholderText);
    $('#first_name').blur(function(){
        $(this).val() == '' ? $(this).val(placeholderText) : false;
    });
    $('#first_name').focus(function(){
        $(this).val() == placeholderText ? $(this).val('') : false;
    });
}

Do the same for the blur event too, then that will mimic a placeholder attribute.

[Edit]

Okay, after rethinking this (due to the comment) this is really not the most elegant solution (however it does work), so I would disregard this answer totally.

edited Jul 22 '13 at 08:43

answered Jul 17 '13 at 10:13

DarkMantis

1,510
5
19
40

Although thinking about it, that will match any IE version, so you may want to change the if condition to just match on [\d.]{1} or something (My regex isn't great) – DarkMantis Jul 17 '13 at 10:14
Returning a string from `.focus` does nothing. What are you trying to do? – gen_Eric Jul 17 '13 at 15:40
Another problem with this is Placeholder values will be submitted when forms are submitted. – cmfolio Mar 06 '15 at 21:22

dharmesh · Answer 2 · 2015-02-04T08:03:26.710

if(navigator.appVersion.match(/MSIE [\d.]+/)){
    $(document).find("input[placeholder]").each(function(){
        if($.trim($(this).val()) == ""){
            $(this).val($(this).attr("placeholder")).addClass('placeholder');
        }
        $(this).on("focus",function(){
            $(this).hasClass('placeholder') ? $(this).val('').removeClass('placeholder') : false;
        }).on("blur",function(){
            $(this).val() == '' ? $(this).val($(this).attr("placeholder")).addClass('placeholder') :false;          
        });
    });     
}

score 0 · Answer 3 · answered Feb 05 '15 at 19:11

A little simpler answer worked for me not being very trusting of Regex (my downfall)

function setPlaceHolderForIE9() {
    var pos = window.navigator.userAgent.indexOf("MSIE");

    if (pos > 0) {
        if (window.navigator.userAgent.substring(pos + 5, window.navigator.userAgent.indexOf(".", pos)) < 10) {
            //alert($("input[placeholder]").val($("input[placeholder]").attr("placeholder")));
            $("input[placeholder]").each(function () {
                $(this).val($(this).attr("placeholder"));
            });

            $("input[placeholder]").click(function () {
                if ($(this).val() === $(this).attr("placeholder")) {
                    $(this).val('');
                }
            });

            $('input[placeholder]').blur(function () {

                if ($.trim($(this).val()).length === 0) {
                    $(this).val($(this).attr("placeholder"));
                }
            });


        }
    }
}

placeholder is not working in IE9

3 Answers3

Linked