How to support placeholder attribute in IE8 and 9

Question

I have a small issue  the placeholder attribute for input boxes is not supported in IE 8-9   What is the best way to make this support in my project  ASP Net   I am using jQuery  Need I use some other external tools for it   Is http   www hagenburger net BLOG HTML5-Input-Placeholder-Fix-With-jQuery html a good solution

User · Answer

I used the code of this link  http   dipaksblogonline blogspot com 2012 02 html5-placeholder-in-ie7-and-ie8-fixed html  But in browser detection I used   if  navigator userAgent indexOf  MSIE    gt  -1       Your placeholder support code here

User · Answer

You could use this jQuery plugin  https   github com mathiasbynens jquery-placeholder  But your link seems to be also a good solution

User · Answer

Since most solutions uses jQuery or are not this satisfying as I wished it to be I wrote a snippet for myself for mootools   function fix placeholder container       if container    null  container   document body       if    placeholder  in document createElement  input               var inputs   container getElements  input            Array each inputs  function input                var type   input get  type                 if type     text     type     password                     var placeholder   input get  placeholder                    input set  value   placeholder                   input addClass    placeholder                     if  input hasEvent  focus   placeholder focus                        input addEvent  focus   placeholder focus                                      if  input hasEvent  blur   placeholder blur                        input addEvent  blur   placeholder blur                                                           function placeholder focus         var input     this            if input get  class   contains    placeholder      input get  value                   input removeClass    placeholder            input set  value                  function placeholder blur         var input     this            if input get  value                   input addClass    placeholder            input set  value   input get  placeholder                I confess that it looks a bit more MORE than others but it works fine    placeholder is a ccs-class to make the color of the placeholder text fancy   I used the fix placeholder in window addEvent  domready       and for any additinally added code like popups   Hope you like it   Kind regards

User · Answer

the   Browser msie is not on the latest JQuery anymore     you have to use the   support  like below     lt script gt         function                  support placeholder     placeholder  in document createElement  input             jQuery            fix for IE7 and IE8        function               if     support placeholder                     placeholder    focus function                       if    this  val        this  attr  placeholder      this  val                      blur function                       if    this  val            this  val   this  attr  placeholder                     blur                      placeholder    parents  form   submit function                         this  find   placeholder    each function                          if    this  val        this  attr  placeholder                                 this  val                                                                                         lt  script gt

User · Answer

lt script gt          if    browser msie                   input placeholder    each function                      var input     this                      input  val input attr  placeholder                        input  focus function                         if  input val      input attr  placeholder                              input val                                                                   input  blur function                         if  input val            input val      input attr  placeholder                              input val input attr  placeholder                                                                                        lt  script gt

User · Answer

Add the below code and it will be done     lt script src  https   ajax googleapis com ajax libs jquery 1 4 jquery min js  gt  lt  script gt       lt script src  https   code google com p jquery-placeholder-js source browse trunk jquery placeholder 1 3 min js r 6  gt  lt  script gt       lt script type  text javascript  gt             Mock client code for testing purpose           function                   Client should be able to add another change event to the textfield                input name  input1     blur function    alert  Custom event triggered                            Client should be able to set the field s styles  without affecting place holder                textarea name  input4     css  color    red                    Initialize placeholder               Placeholder init                    or try initialize with parameter                 Placeholder init   color    rgb 255  255  0                       call this before form submit if you are submitting by JS                 Placeholder cleanBeforeSubmit                     lt  script gt    Download the full code and demo from https   code google com p jquery-placeholder-js downloads detail name jquery placeholder 1 3 zip

User · Answer

For others landing here  This is what worked for me     jquery polyfill for showing place holders in IE9     placeholder    focus function         var input     this       if  input val      input attr  placeholder              input val              input removeClass  placeholder             blur function         var input     this       if  input val            input val      input attr  placeholder              input addClass  placeholder            input val input attr  placeholder              blur         placeholder    parents  form   submit function           this  find   placeholder    each function             var input     this           if  input val      input attr  placeholder                  input val                             Just add this in you script js file  Courtesy of http   www hagenburger net BLOG HTML5-Input-Placeholder-Fix-With-jQuery html

User · Answer

lt input type  text  name  Name  value  Name  onfocus  this value       onblur   if this value         value    Name      gt

User · Answer

if you use jquery you can do like this   from this site Placeholder with Jquery       placeholder    parents  form   submit function         this  find   placeholder    each function         var input     this       if  input val      input attr  placeholder            input val                       these are the alternate links    Placeholder jquery library HTML5 polyfills -- go for placeholder section

User · Answer

You can use any one of these polyfills    https   github com jamesallardice Placeholders js  doesn t support password fields  https   github com chemerisuk better-placeholder-polyfill   These scripts will add support for the placeholder attribute in browsers that do not support it  and they do not require jQuery

User · Answer

Here is a javascript function that will create placeholders for IE 8 and below and it works for passwords as well    x000D   x000D     Function to add placeholders to form elements on IE 8 and below    x000D  function add placeholders fm     x000D   for  var e   0  e  lt  document fm elements length  e      x000D    if  fm elements e  placeholder    undefined  amp  amp  x000D    document createElement  input   placeholder    undefined       IE 8 and below      x000D     fm elements e  style background    transparent   x000D     var el   document createElement  span    x000D     el innerHTML   fm elements e  placeholder  x000D     el style position    absolute   x000D     el style padding    2px    x000D     el style zIndex    -1   x000D     el style color     999999   x000D     fm elements e  parentNode insertBefore el  fm elements e    x000D     fm elements e  onfocus   function     x000D       this style background    yellow    x000D       x000D     fm elements e  onblur   function     x000D      if  this value        this style background    transparent   x000D      else this style background    white    x000D         x000D       x000D     x000D    x000D   x000D  add placeholders document getElementById  fm    x000D   lt form id  fm  gt  x000D     lt input type  text  name  email  placeholder  Email  gt  x000D     lt input type  password  name  password  placeholder  Password  gt  x000D     lt textarea name  description  placeholder  Description  gt  lt  textarea gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

function            if   browser msie  amp  amp    browser version  lt   9               placeholder    focus function                if   this  val      this  attr  placeholder      this  val                 blur function                if   this  val          this  val   this  attr  placeholder                blur                 placeholder    parents  form   submit function                   this  find   placeholder    each function                     if    this  val        this  attr  placeholder                            this  val                                                               try this

User · Answer

I use thisone  it s only Javascript   I simply have an input element with a value  and when the user clicks on the input element  it changes it to an input element without a value    You can easily change the color of the text using CSS  The color of the placeholder is the color in the id  IEinput  and the color your typed text will be is the color in the id  email  Don t use getElementsByClassName  because the versions of IE that don t support a placeholder  don t support getElementsByClassName either   You can use a placeholder in a password input by setting the type of the original password input to text   Tinker  http   tinker io 4f7c5 1  - JSfiddle servers are down    sorry for my bad english  JAVASCRIPT  function removeValue         document getElementById  mailcontainer            innerHTML     lt input id   email   type   text   name   mail   gt        document getElementById  email   focus        HTML   lt span id  mailcontainer  gt       lt input id  IEinput  onfocus  removeValue    type  text  name  mail  value  mail  gt   lt  span gt

User · Answer

I had compatibility issues with several plugins I tried  this seems to me to be the simplest way of supporting placeholders on text inputs   function placeholders          On Focus         text   focus function              Check to see if the user has modified the input  if not then remove the placeholder text         if   this  val        this  attr  placeholder                   this  val                               On Blur         text   blur function              Check to see if the use has modified the input  if not then populate the placeholder back into the input         if    this  val                         this  val   this  attr  placeholder

[html] How to support placeholder attribute in IE8 and 9

Examples related to html

Examples related to internet-explorer

Examples related to placeholder