Input placeholders for Internet Explorer

Question

HTML5 introduced the placeholder attribute on input elements  which allows to display a greyed-out default text   Sadly the Internet Explorer  including IE 9 does not support it   There already are some placeholder simulator scripts out there  They typically work by putting the default-text into the input field  give it a grey color and remove it again as soon as you focus the input field   The drawback of this approach is that the placeholder text is in the input field  Thus    scripts can t easily check whether an input field is empty server side processing must check against the default value  in order to not insert the placeholder into the database    I would like to have a solution  where the placeholder text isn t in the input itself

User · Answer

Simple like this     function                  var element       selecter       if element val       element attr  placeholder             element text     select   blur

User · Answer

I suggest you a simple function    function bindInOut element value        element focus function                 if element val      value  element val                           blur function                 if element val          element val value                element blur        And to use it  call it in this way    bindInOut     input    Here your value

User · Answer

After trying some suggestions and seeing issues in IE here is the one that works   https   github com parndt jquery-html5-placeholder-shim   What I have liked - you just include the js file  No need to initiate it or anything

User · Answer

Best one in my experience is https   github com mathiasbynens jquery-placeholder  recommended by html5please com   http   afarkas github com webshim demos index html also has a good solution among its much more extensive library of polyfills

User · Answer

You can use    var placeholder    search  here        search   focus function        if    trim   this  val         placeholder           this value               blur function        if    trim   this  val                      this value   placeholder           val placeholder

User · Answer

I found a quite simple solution using this method   http   www hagenburger net BLOG HTML5-Input-Placeholder-Fix-With-jQuery html  it s a jquery hack  and it worked perfectly on my projects

User · Answer

NOTE  the author of this polyfill claims it  works in pretty much any browser you can imagine  but according to the comments that s not true for IE11  however IE11 has native support  as do most modern browsers  Placeholders js is the best placeholder polyfill I ve seen  is lightweight  doesn t depend on JQuery  covers other older browsers  not just IE   and has options for hide-on-input and run-once placeholders

User · Answer

I created my own jQuery plugin after becoming frustrated that the existing shims would hide the placeholder on focus  which creates an inferior user experience and also does not match how Firefox  Chrome and Safari handle it  This is especially the case if you want an input to be focused when a page or popup first loads  while still showing the placeholder until text is entered   https   github com nspady jquery-placeholder-labels

User · Answer

Placeholdr is a super-lightweight drop-in placeholder jQuery polyfill that I wrote   It s less than 1 KB minified   I made sure that this library addresses both of your concerns    Placeholdr extends the jQuery   fn val   function to prevent unexpected return values when text is present in input fields as a result of Placeholdr   So if you stick with the jQuery API for accessing your fields  values  you won t need to change a thing  Placeholdr listens for form submits  and it removes the placeholder text from fields so that the server simply sees an empty value    Again  my goal with Placeholdr is to provide a simple drop-in solution to the placeholder issue   Let me know on Github if there s anything else you d be interested in having Placeholdr support

User · Answer

Here is a pure javascript function  no jquery needed  that will create placeholders for IE 8 and below and it works for passwords as well  It reads the HTML5 placeholder attribute and creates a span element behind the form element and makes the form element background transparent    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

With a jQuery implementation you can EASILY remove the default values when it is time to submit  Below is an example       submit   click function       var text   this attr  placeholder       var inputvalue   this val        you need to collect this anyways    if  text     inputvalue  inputvalue                ajax         do your ajax thing here        I know that you are looking for an overlay  but you might prefer the ease of this route  now knowing what I wrote above   If so  then I wrote this for my own projects and it works really nice  requires jQuery  and takes just a couple minutes to implement for your entire site  It offers grey text at first  light grey when in focus  and black when typing  It also offers the placeholder text whenever the input field is empty    First set up your form and include your placeholder attributes on the input tags    lt input placeholder  enter your email here  gt    Just copy this code and save it as placeholder js      function             fn placeHolder   function             var input   this        var text   input attr  placeholder        make sure you have your placeholder attributes completed for each input field       if  text  input val text  css   color  grey            input focus function               if  input val       text  input css   color  lightGrey     selectRange 0 0  one  keydown   function                     input val     css   color  black                                     input blur function              if  input val            input val       text  input val text  css   color  grey                        input keyup function             if  input val          input val text  css   color  lightGrey     selectRange 0 0  one  keydown   function                input val     css   color  black                                                 input mouseup function            if  input val       text  input selectRange 0 0                             fn selectRange   function start  end          return this each function             if  this setSelectionRange    this setSelectionRange start  end             else if  this createTextRange                var range   this createTextRange                range collapse true                range moveEnd  character   end                range moveStart  character   start                range select                                    jQuery      To use on just one input       myinput   placeHolder        just one   This is how I recommend you implement it on all input fields on your site when the browser does not support HTML5 placeholder attributes   var placeholder    placeholder  in document createElement  input      if   placeholder              getScript     js placeholder js   function                  input   each function         this will work for all input fields           this  placeHolder

User · Answer

TO insert the plugin and check the ie is perfectly workedjquery placeholder js       lt script src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt       lt script src  jquery placeholder js  gt  lt  script gt       lt script gt             To test the  id toggling on password inputs in browsers that don   t support changing an input   s  type dynamically  e g  Firefox 3 6 or IE   uncomment this               fn hide   function     return this               Then uncomment the last rule in the  lt style gt  element  in the  lt head gt              function                    Invoke the plugin                input  textarea   placeholder  customClass  my-placeholder                    That   s it  really                 Now display a message if the browser supports placeholder natively             var html              if    fn placeholder input  amp  amp    fn placeholder textarea                    html     lt strong gt Your current browser natively supports  lt code gt placeholder lt  code gt  for  lt code gt input lt  code gt  and  lt code gt textarea lt  code gt  elements  lt  strong gt  The plugin won   t run in this case  since it   s not needed  If you want to test the plugin  use an older browser                    else if    fn placeholder input                    html     lt strong gt Your current browser natively supports  lt code gt placeholder lt  code gt  for  lt code gt input lt  code gt  elements  but not for  lt code gt textarea lt  code gt  elements  lt  strong gt  The plugin will only do its thang on the  lt code gt textarea lt  code gt s                              if  html                        lt p class  note  gt     html     lt  p gt    insertAfter  form                                   lt  script gt

User · Answer

I have written a jquery plugin to solve this problem   it s free    JQuery Directory   http   plugins jquery com project kegles-jquery-placeholder  Site  www kegles com br jquery-placeholder

User · Answer

Works only for IE9    The following solution binds to input text elements with the placeholder attribute  It emulates a placeholder behaviour just for IE and clears the input s value field on submit if it is not changed    Add this script and IE would seem to support HTML5 placeholders        function         Run this script only for IE   if  navigator appName      Microsoft Internet Explorer            input type text    each function           var p          Run this script only for input field with placeholder attribute       if  p     this  attr  placeholder               Input field s value attribute gets the placeholder value            this  val p             this  css  color    gray               On selecting the field  if value is the same as placeholder  it should become blank           this  focus function               if  p       this  val                  return   this  val                                          On exiting field  if value is blank  it should be assigned the value of placeholder           this  blur function               if    this  val                         return   this  val p                                                  input type password    each function           var e id  p        if  p     this  attr  placeholder              e id     this  attr  id               change input type so that the text is displayed         document getElementById e id  type    text             this  val p             this  focus function                  change input type so that password is not displayed           document getElementById e id  type    password             if  p       this  val                  return   this  val                                        this  blur function               if    this  val                         document getElementById e id  type    text                 this  val p                                                  form   submit function             Interrupt submission to blank out input fields with placeholder values          input type text    each function             if    this  val         this  attr  placeholder                  this  val                                  input type password    each function             if    this  val         this  attr  placeholder                   this  val

User · Answer

i use jquery placeholderlabels   It s based on this and can be demoed here   works in ie7  ie8  ie9   behavior mimics current firefox and chrome behavior - where the the  placeholder  text remains visible on focus and only disappears once something is typed in the field

User · Answer

I came up with a simple placeholder JQuery script that allows a custom color and uses a different behavior of clearing inputs when focused  It replaces the default placeholder in Firefox and Chrome and adds support for IE8      placeholder script IE8  Chrome  Firefox    usage   lt input type  text  placeholder  some str    gt    function           var textColor     777777     custom color          placeholder    each function              this  attr  tooltip     this  attr  placeholder       buffer          if    this  val               this  val         this  attr  placeholder                    this  css  color   textColor  css  font-style   italic                  this  val   this  attr  placeholder       IE8 compatibility                      this  attr  placeholder         disable default behavior            this  on  focus   function                 if    this  val         this  attr  tooltip                        this  val                                           this  on  keydown   function                   this  css  font-style   normal   css  color    000                           this  on  blur   function                 if    this  val                                this  val   this  attr  tooltip    css  color   textColor  css  font-style   italic

User · Answer

In looking at the  Web Forms   input placeholder  section of HTML5 Cross Browser Polyfills  one I saw was jQuery-html5-placeholder   I tried the demo out with IE9  and it looks like it wraps your  lt input gt  with a span and overlays a label with the placeholder text    lt label gt Text     lt span style  position  relative   gt       lt input id  placeholder1314588474481  name  text  maxLength  6  type  text  placeholder  Hi Mom  gt       lt label style  font  0 75em normal sans-serif  left  5px  top  3px  width  147px  height  15px  color  rgb 186  186  186   position  absolute  overflow-x  hidden  font-size-adjust  none  font-stretch  normal   for  placeholder1314588474481  gt Hi Mom lt  label gt     lt  span gt   lt  label gt    There are also other shims there  but I didn t look at them all   One of them  Placeholders js  advertises itself as  No dependencies  so no need to include jQuery  unlike most placeholder polyfill scripts     Edit  For those more interested in  how  that  what   How to create an advanced HTML5 placeholder polyfill which walks through the process of creating a jQuery plugin that does this   Also  see keep placeholder on focus in IE10 for comments on how placeholder text disappears on focus with IE10  which differs from Firefox and Chrome   Not sure if there is a solution for this problem

[javascript] Input placeholders for Internet Explorer

Examples related to javascript

Examples related to html

Examples related to internet-explorer

Examples related to placeholder