placeholder is not showing in IE9

Question

The placeholder is not appearing in IE9 browser...
providing my code below... do u need to write any jquery or css hack for ie9

http://defie.co/contact.html

<div class="span6">
    <i class="bookmarkingContact"></i>
    <h3 style="margin-bottom: 22px;">Inquiry</h3>

    <input class="span2" type="text" name="email" placeholder="User Name">
    <input class="span2" type="text" name="email" placeholder="Company">
    <input class="span2" type="text" name="email" placeholder="Email">
    <input class="span2" type="text" name="email" placeholder="Password">
    <a href="#" style="position: relative; top: 13px;">Sign Up</a>
</div>

This has already been answered elsewhere much better than it has been here: [Stack from last November](http://stackoverflow.com/a/13281620/2145980) — Josh Burgess, Mar 10 '13 at 00:14

gdoron · Answer 1 · 2013-03-09T22:06:25.337

5

The place holder is not appearing in ie9 browser

IE < 10 doesn't support the HTML5 placeholder attribute.

Quircksmode

edited Mar 09 '13 at 22:06

answered Mar 09 '13 at 22:01

gdoron

147,333
58
291
367

score 1 · Answer 2 · answered Mar 09 '13 at 22:04

1

The placeholder attribute of the input tag is not supported in Internet Explorer 9 and earlier versions. So either use Javascript to simulate the effect, add a label next to the input, or just forget about IE.

answered Mar 09 '13 at 22:04

James Coyle

9,922
1
40
48

klewis · Answer 3 · 2013-03-09T22:14:11.787

IE9 doesn't support it. What I have done to try to create the same effect in IE9, was write a JavaScript function that checks if placehoder is supported or not. And if it's not, then display text in the form element fields via jQuery...

/*AN HTML5 INPUT ATTRIBUTE THATS REALLY COOL*/
var placeHolderSupport = ('placeholder' in document.createElement('input'));

/*IF PLACEHOLDER IS NOT SUPPORTED...*/
if(!placeHolderSupport) {

/*GET THE ID OF EACH FORM ELEMENT*/
fname       = $('#fname');
femail      = $('#femail');
furl        = $('#furl');
fcomment    = $('#fcomment');
fsubmit     = $('#sendbtn');

/*DEFINE DEFAULT VALUES FOR EACH INPUT FIELD*/
fnameval    = "Your Full Name";
femailval   = "Your E-mail Address - (It will not be shared!)";
furlval     = "Your Web Site";
fcommentval = "Your Message";



        /*ASSOCIATE THE DEFAULT VALUES TO THE FORM INPUT FIELDS*/
        fname.val(fnameval);
        femail.val(femailval);
        furl.val(furlval);
        fcomment.val(fcommentval);

        /*CYCLE THROUGH EACH INPUT FIELD TO...*/
            $.each([
            {selector: fname,   mvalue: fnameval},
            {selector: femail,  mvalue: femailval},
            //{selector: furl,    mvalue: furlval},
            {selector: fcomment,mvalue: fcommentval}
            ],function(i, obj) {

              /*...SHOW OR HIDE DEFAULT VALUES*/
                obj.selector.focus(function() {
                    if(this.value == obj.mvalue) { this.value = ''; };
                }).blur(function() {    
                    if(!this.value) { this.value = obj.mvalue;};
                });
    }

Where did all this code came from? – gdoron Mar 09 '13 at 22:23 — gdoron, Mar 09 '13 at 22:23

placeholder is not showing in IE9

3 Answers3