Placeholder Attribute on Input Tags for Ie

Placeholder attribute on input tags for IE?

I wrote a jQuery plugin a while back that will add placeholder support to any browser that does not support it.

Placeholder Text in IE

Input placeholders for Internet Explorer

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.

Placeholder attribute on input tags for IE?

I wrote a jQuery plugin a while back that will add placeholder support to any browser that does not support it.

Placeholder Text in IE

Placeholder attribute not supported in IE. Any suggestions?

You're right that IE8 doesn't support the placeholder attribute. placeholder is part of the HTML5 spec, and IE8 was released a long time before HTML5 was thought of.

The best way to deal with it in a seamless manner is to use a tool like Modernizr to detect whether the browser has support for the placeholder feature, and run a JS polyfill script if it isn't supported.

if(!Modernizr.input.placeholder) {
    //insert placeholder polyfill script here.
}

There are numerous placeholder polyfill scripts out there to download. Pick one which makes use of the placeholder attribute so that you only need to define the placeholder string in one place for all browsers. Here's one you could try: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Hope that helps.

Placeholder not working with internet explorer

Finally found how to resolve this issue, the emulation was set at 9 as default on the debugger's screen even if internet explorer 11 was being used, so I added this on the head tag of the HTML.

<meta http-equiv="X-UA-Compatible" content="IE=11">

Which changes the compatability format to IE11.

Text input placeholders not displaying in IE and Firefox

As luke2012 stated this happens when box-sizing: border-box; is being used on text type input fields. However this only happens when a fixed height is being used (such as in the Bootstrap framework) and there is too much top and bottom padding. Which not only prevents placeholder text from displaying but also input text as well in Firefox.

I find that the better solution is to keep box-sizing: border-box; and to instead remove the top and bottom padding and increase the height to the total height that you want the input field to have (including any border).

input[type="email"], input[type="password"], input[type="text"] 
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 42px; // Increase height as required
    margin-bottom: 30px;
    padding: 0 20px; // Now only left & right padding
}

This keeps things more consistent and works well on frameworks such as Bootstrap.

Alternatively, you could increase the fixed height or set height: auto; and adjust the top and bottom padding as required.

Placeholder in Angular on IE issue

So I found that the issue was with disabled element on the <tagged> directive.

IE interprets the disabled attribute on the (to him unknown) tagged element and also disables all child elements (including the input field).

So what I did was actually renamed the disabled element with a custom one, and replace it with new where I needed it.

How to support placeholder attribute in IE8 and 9

You could use this jQuery plugin:
https://github.com/mathiasbynens/jquery-placeholder

But your link seems to be also a good solution.

HTML Placeholder browser compatibility

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.

---

Related Topics