HTML Placeholder browser compatibility

Question

What browsers support the placeholder html tag for text inputs? Does Internet Explorer support it? (I have a JavaScript placeholder that I can use for the browsers that do not support it.)

<input type=TEXT placeholder="placeholder here" />

Fair question! My guess is that IE doesn't support it at all, it being a HTML 5 attribute. But I'm too lazy to research it, too. :) — Pekka, Oct 23 '10 at 13:10

score 18 · Answer 1 · answered Jan 02 '13 at 06:53

18

For anyone interested, this is the jQuery Fallback that I use
I use it with jQuery Validation Engine.
Replace FORMCLASS with the class of your form.

<!-- IF IE - use Placeholder Fallback -->
<!--[if lt IE 10 ]>
<script>
  $(".FORMCLASS").find('[placeholder]').each(function(){ 
    $(this).val($(this).attr('placeholder'));
    $(this).focus(function() {
      if ($(this).attr('placeholder')==$(this).val()) {
        $(this).val('');
      }
    });
  });
</script>
<![endif]-->

answered Jan 02 '13 at 06:53

Jera

183
1
5

1

best solution at this time. Thank you! – 5ulo Feb 18 '13 at 23:15
as alternative to [if lt IE 10 ] in HTML something like jQuery.support.placeholder = (function(){ var i = document.createElement('input'); return 'placeholder' in i; })(); can be used. Taken from [link](http://stackoverflow.com/questions/3937818/how-to-test-if-the-browser-supports-the-native-placeholder-attribute) – Nightingale7 May 31 '13 at 08:53
2

There is a problem if user someway skips the focus, e.g. just clicks "submit", then the placeholder is passed as field value. – Nightingale7 Jun 04 '13 at 09:13
1

Note this will not display the placeholder text for password fields. – Pool Aug 16 '13 at 09:48
this is introduced in html5. For older browsers, you can use javascript to fake it by prefilling and removing text when it's clicked on if it matches the hint text and putting the hint text back if you empty the box. – John Lord Jun 14 '19 at 04:08

score 18 · Accepted Answer · edited May 18 '14 at 15:32

18

It is currently supported by all major browsers except IE 9 and earlier and Opera mini.

For updates, look at the w3schools-specs Or even better, view this overview.

edited May 18 '14 at 15:32

Aaron Butacov

32,415
8
47
61

answered Oct 23 '10 at 13:13

Tim

9,351
1
32
48

8

As from version 3.7 Firefox supports this too. Opera from version 11 and Iphone from version 4.0. Just so you know. – Tim Jun 27 '11 at 10:50
Check the support for HTML placeholder on http://www.w3schools.com/tags/att_input_placeholder.asp – Jan 29 '13 at 15:18
IE 10 supports it, I can see the placeholder text in IE 10 :) so good news from IE! unbelievable :D – mahaidery Jan 29 '13 at 23:18
17

Please, for the love of all that is sane and good, do not use w3schools. For current browser support, caniuse is a good resource: http://caniuse.com/input-placeholder – Mark Nottingham Jan 29 '14 at 10:12
3

w3school is NOT a good source of info anymore (some say it used to be), see [www.w3fools.com](http://www.w3fools.com/) – Adriano May 30 '14 at 08:38

score 17 · Answer 3 · 2013-01-18T10:11:55.483

17

According to this, IE 10 supports it. (You can test it here)

I fix the problem this -probably the most easiest- way:

<!--[if lt IE 10]>email:<![endif]-->
<input placeholder='email' type='text' name='email'>

edited Jan 18 '13 at 10:11

answered Jun 28 '12 at 09:55

1

IE 10 supports it. Just Tested. – geilt Jan 18 '13 at 00:15
I like this solution - no JS to worry about. – Andrew Sep 21 '13 at 04:51
Definitely easiest solution here – Serj Sagan Apr 30 '14 at 00:16

score 10 · Answer 4 · answered Jun 01 '11 at 13:55

10

Firefox also supports it since 4.0

answered Jun 01 '11 at 13:55

vinz

566
3
11

score 8 · Answer 5 · answered Nov 27 '12 at 05:17

8

IE is not supporting placeholders

I feel this code better and it works in all major browsers

<input id="example-email" type="text" value="Email Address" onfocus="if(this.value === 'Email Address') this.value = '';" onblur="if(this.value === '') this.value = 'Email Address';" name="example-email">

answered Nov 27 '12 at 05:17

Sanjay

761
14
25

8

I do not think your code is better. That's the old way. I know it works. But actually we do not need this javascript for most of the browsers. So we should use the placeholder attribute. And if we cannnot or dont't want to forget the IE then we have to provide an explicit solution for IE only. – Martin Feb 04 '13 at 07:47

score 6 · Answer 6 · answered Sep 18 '12 at 15:17

6

Question may have been answered a few years ago, but I found it today doing a search.

Since a good reference and pics were not provided before, I am updating this question with both.

HTML5 placeholder Attribute basically says:

The placeholder attribute is supported in all major browsers, except Internet Explorer.

FYI: This includes IE9.

screenshot

answered Sep 18 '12 at 15:17

3

Possibly as it's w3schools, it does have some incorrect information. That said, in this case it has exactly what I want, so upvote! – Jamie Nov 03 '12 at 09:22

Wilk · Answer 7 · 2013-07-30T07:11:02.893

4

Placeholders are fully supported by:

FF 4+
Chrome 4+
Safari 5+
Opera 11.6+
IE 10+

Source: Can I use input placeholder attribute?

edited Jul 30 '13 at 07:11

answered Jul 30 '13 at 07:02

Wilk

7,873
9
46
70

score 4 · Answer 8 · answered Oct 07 '11 at 14:06

4

In case someone is looking for a HTML5-placeholder alike solution for non-supported browsers here is a good article about it:

http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/

answered Oct 07 '11 at 14:06

Mecalito

795
11
14

score 2 · Answer 9 · answered May 02 '13 at 08:40

For those who want the simplest solution, use the built-in features!

<input type="text" name="email" value="Email Address" placeholder="Email Address" onfocus="if(this.value==this.placeholder) this.value=''" onblur="if(this.value=='') this.value=this.placeholder">

Tested in chrome and IE8 :)

Note: I use this with more javascript to validate the input and give feedback inside the field itself by changing the value and placeholder at runtime.

galengodis · Answer 10 · 2015-10-13T15:10:43.950

-1

I know it's an old question. My suggestion is to use Modernizr for detecting placeholder support! https://modernizr.com/

edited Oct 13 '15 at 15:10

answered Oct 13 '15 at 15:00

galengodis

901
1
9
18

HTML Placeholder browser compatibility

10 Answers10

Linked

Related