42

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" />

1
  • 15
    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, 2010 at 13:10

10 Answers 10

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.

5
  • 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, 2011 at 10:50
  • Check the support for HTML placeholder on w3schools.com/tags/att_input_placeholder.asp
    – user1026130
    Jan 29, 2013 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, 2013 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: caniuse.com/input-placeholder Jan 29, 2014 at 10:12
  • 3
    w3school is NOT a good source of info anymore (some say it used to be), see www.w3fools.com
    – Adriano
    May 30, 2014 at 8:38
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]--> 
5
  • 1
    best solution at this time. Thank you!
    – 5ulo
    Feb 18, 2013 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 May 31, 2013 at 8: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. Jun 4, 2013 at 9:13
  • 1
    Note this will not display the placeholder text for password fields.
    – Pool
    Aug 16, 2013 at 9: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, 2019 at 4:08
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'>
3
  • 1
    IE 10 supports it. Just Tested.
    – geilt
    Jan 18, 2013 at 0:15
  • I like this solution - no JS to worry about.
    – Andrew
    Sep 21, 2013 at 4:51
  • Definitely easiest solution here
    – Serj Sagan
    Apr 30, 2014 at 0:16
10

Firefox also supports it since 4.0

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">
1
  • 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 4, 2013 at 7:47
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

1
  • 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 3, 2012 at 9:22
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/

4

Placeholders are fully supported by:

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

Source: Can I use input placeholder attribute?

0
2

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.

-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.