HTML5 input type placeholder is not working in IE

Question

I am using HTML5 for one of my project. There I am using input placeholder property to show some default text. It's not working in IE. Any solution for this?

possible duplicate of [Input placeholders for Internet Explorer](http://stackoverflow.com/questions/5522164/input-placeholders-for-internet-explorer) — Joshua Dwire, Aug 05 '13 at 17:36

score 3 · Answer 1 · answered Aug 05 '13 at 17:44

If you are using javascript in your project, you can add this peace of code and it will provide a placeholder through javascript to your inputs.

function supports_input_placeholder() {
        var i = document.createElement('input');
        return 'placeholder' in i;
    }

if (!supports_input_placeholder()) {
    var fields = document.getElementsByTagName('INPUT');
    for (var i = 0; i < fields.length; i++) {
        if (fields[i].hasAttribute('placeholder')) {
            fields[i].defaultValue = fields[i].getAttribute('placeholder');
            fields[i].onfocus = function () { if (this.value == this.defaultValue) this.value = ''; }
            fields[i].onblur = function () { if (this.value == '') this.value = this.defaultValue; }
        }
    }
}

Yes, that correct. But when you post the form you have to check at the server end also as it will have some value as per above code. — Deepak Biswal, Aug 05 '13 at 17:50
@DeepakBiswal inputs with attribute `placeholder` don't imply any kind of server-side activity: the above code will take whatever has been put as the `placeholder` attribute and make that behaviour work in non-supporting browsers. It solves your problem! — Barney, Aug 06 '13 at 10:37

score 2 · Accepted Answer · answered Aug 05 '13 at 17:36

2

Placeholder is not supported until IE 10.

http://caniuse.com/#feat=input-placeholder

You can use a polyfill to support it in IE.

answered Aug 05 '13 at 17:36

ceejayoz

176,543
40
303
368

Yes, I know it is not supported. Can we write some function in java-script to achieve this. – Deepak Biswal Aug 05 '13 at 17:38
2

@DeepakBiswal I answered that, and your question really should've noted that you were aware of the lack of support. – ceejayoz Aug 05 '13 at 17:39
I got it. I have written a custom function and it's working fine now. – Deepak Biswal Aug 05 '13 at 17:41

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

See the top answer on this thread as it has a very good explanation: Input placeholders for Internet Explorer

edited May 23 '17 at 11:56

Community

1
1

answered Aug 05 '13 at 17:38

Dawson Loudon

6,029
2
27
31

score 0 · Answer 4 · answered Aug 05 '13 at 17:39

Older version of IE don't support html placeholders. Therefore, you will need to use a javascript solution like Placeholder.js. It automatically detects the placeholder attributes in your input elements and utilizes a cross-browser solution to show them.

score 0 · Answer 5 · edited Aug 06 '13 at 10:39

0

Use jQuery placeholder. HTML5 placeholder is not supported by standard HTML5 declaration until Internet Explorer 10.

edited Aug 06 '13 at 10:39

Barney

16,181
5
62
76

answered Aug 05 '13 at 17:39

Marin Sagovac

3,932
5
23
53

w3schools is often inaccurate, reductive and misleading and shouldn't be propagated as a reference (Google does that already). http://www.w3fools.com/ – Barney Aug 06 '13 at 10:39
I know. I suggested him on a light way. Thank you for your tip. – Marin Sagovac Aug 06 '13 at 10:51

score 0 · Answer 6 · answered Jan 01 '14 at 18:37

0

try Placeholders.js

it is light weight and also works well in IE 6

answered Jan 01 '14 at 18:37

Mohammed Sufian

1,743
6
35
62

score 0 · Answer 7 · answered Jan 19 '15 at 22:43

0

Alternative option would be to show the "name:" text on IE < 10

<!--[if lt IE 10]><style>.show-ie{display:block;}</style><![endif]-->

answered Jan 19 '15 at 22:43

fourroses

93
1
3
15

HTML5 input type placeholder is not working in IE

7 Answers7