How to support placeholder attribute in IE8?

Question

I have a small issue. The placeholder attribute for input boxes is not supported in IE 8.

Is there a good way to add support for this?

Answer 1

You can always use additional plugins like

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

• https://github.com/jamesallardice/Placeholders.js

• http://jamesallardice.github.io/Placeholders.js

Any of this will work :)

I suggest the first one. It has worked for me !

The Last 2 doesnt need any JQuery !

Possible duplicate of -> How to support placeholder attribute in IE8 and 9

Answer 2

Ok, here's something extremely quick, dirty and untested (literally typed in on my phone), but this might be a route you'd go. The idea is to append a span to the element that contains the text input, and position it "over" the text input absolutely via CSS. You could put the placeholder text into an input using both placeholder and data-placeholder. You could likely even just use placeholder only.

P.S. jQuery is not mandatory.

// include jQuery somewhere 

function getPlaceholder(obj, parent=false) {
    var ph = obj.data('placeholder');
    if ( ph !== undefined && ph !== false) {
        if (!parent) {
            parent = obj.parent();
        }

    if ( !parent.find(".ph").length ) {
        parent.append('<span class="ph">'+ph+'</span>');
    }
    }
}

// on page load
$("input[type=text]").each(function() {
        getPlaceholder($(this));
});

$(document).on('change', 'input[type=text]', function() {
    var curVal = $(this).val();
    var phtext = $(this).parent().find(".ph");

    if (phtext.length) {
        if ( curVal === "" ) {
            phtext.show();
        }
        else {
            phtext.hide();
        }
    }
});