15

I am using Bootstrap for my project. The placeholders are displaying fine for all browsers except in Internet Explorer 8 and below.

Are there any solutions to get placeholder support in IE8?

Henrik Heimbuerger
  • 9,924
  • 6
  • 56
  • 69
user521024
  • 521
  • 2
  • 7
  • 29
  • Placeholders are'nt supported in IE, you have to use a value and set it on focus/blur etc. with javascript. – adeneo Nov 07 '12 at 12:56
  • 4
    You can use a [`placeholder` attribute polyfill](https://github.com/jamesallardice/Placeholders.js) to add support for the `placeholder` attribute in all browsers. IE doesn't support it below version 10. – James Allardice Nov 09 '12 at 15:30
  • you should accept one of the answers if they helped you – Eonasdan Nov 15 '12 at 15:18
  • related question - http://stackoverflow.com/questions/6366021/placeholder-in-ie9/14981525 – cwd Feb 20 '13 at 13:57

5 Answers5

8

you can use this plugin https://github.com/mathiasbynens/jquery-placeholder Even works in IE6

Ruben
  • 8,956
  • 14
  • 63
  • 102
4

you can use jquery watermark plugin for that

https://code.google.com/p/jquery-watermark/

rahul
  • 7,573
  • 7
  • 39
  • 53
2

It should'nt be to hard to figure this out without a plugin, I'm guessing something close to this will do the trick:

var test = document.createElement('input');
if (!('placeholder' in test)) {
    $('input').each(function () {
        if ($(this).attr('placeholder') != "" && this.value == "") {
            $(this).val($(this).attr('placeholder'))
                   .css('color', 'grey')
                   .on({
                       focus: function () {
                         if (this.value == $(this).attr('placeholder')) {
                           $(this).val("").css('color', '#000');
                         }
                       },
                       blur: function () {
                         if (this.value == "") {
                           $(this).val($(this).attr('placeholder'))
                                  .css('color', 'grey');
                         }
                       }
                   });
        }
    });
}
adeneo
  • 312,895
  • 29
  • 395
  • 388
2

Adding on from Rubens answer there is a demo here

http://mathiasbynens.be/demo/placeholder

Dan
  • 1,295
  • 2
  • 22
  • 46
1

IE9 and below doesn't support the placeholder attribute. See this

You can use EZPZ hints to supplement it though. Just load the script if the browser is IE

 <!--[if lt IE 10]>
      <script src="PATHTOFILE"></script>
    <![endif]-->

EZPZ hints allows you to continue to use placeholder for modern browsers.

Example:

<input type="text" id="search" placeholder="Search" />

$("input[type=text]").ezpz_hint();
Eonasdan
  • 7,563
  • 8
  • 55
  • 82