Input placeholders for Internet Explorer

by

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 <input> with a span and overlays a label with the placeholder text.

<label>Text:
  <span style="position: relative;">
    <input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
    <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">Hi Mom</label>
  </span>
</label>

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.

More Related Contents:

  1. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  2. Why don’t self-closing script elements work?
  3. Do HTML5 custom data attributes “work” in IE 6?
  4. Dropdownlist width in IE
  5. Open links made by createObjectURL in IE11
  6. Placeholder in IE9
  7. How to start automatic download of a file in Internet Explorer?
  8. Can I load an entire HTML document into a document fragment in Internet Explorer?
  9. Can I force a link to open in a specific browser?
  10. Does IE8 out-of-the-box have support for ‘localStorage’
  11. Dynamically loading css stylesheet doesn’t work on IE
  12. How to make Internet Explorer emulate pointer-events:none?
  13. How to automatically allow blocked content in IE?
  14. “pointer-events: none” does not work in IE9 and IE10
  15. Changing the type in IE with JavaScript
  16. How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript?
  17. img onload doesn’t work well in IE7
  18. How to disable elements selection and resizing in contenteditable div?
  19. Why does Firefox react differently from Webkit and IE to “click” event on “select” tag?
  20. IE6 Hover Issue
  21. Images failing to load in IE with DOM: 7009 error (unable to decode) in console
  22. onchange / onclick in a checkbox doesn’t work in IE
  23. Showing Placeholder text for password field in IE
  24. Full-screen iframe with a height of 100%
  25. How do I remove a file from the FileList
  26. Why is it bad practice to use links with the javascript: “protocol”?
  27. contentDocument for an iframe
  28. Proper way to reset a GIF animation with display:none on Chrome
  29. Returning value from confirmation dialog using JQuery UI dialog
  30. HTML5 Video autoplay with sound unmuted

Leave a Comment