3

Ok, so to overcome IE's lack of support for HTML5's Placeholder attribute, I wrote some JS that loops over inputs and sets the value of the input to be the placeholder attribute value for browsers that don't support it. Now this works fine, however on password fields, whatever the value is, appears as dots/bullets to obscure passwords.

Now what measures and methods can I take to get around this?

To have a placeholder style effect but on an input[type="password"]?

benhowdle89
  • 36,900
  • 69
  • 202
  • 331
  • You can write some more JavaScript :p – Saad Imran. Sep 12 '12 at 11:24
  • @SaadImran. Just wondering how to approach it... – benhowdle89 Sep 12 '12 at 11:24
  • You can, eh, set the password field's background color to transparent and place a white `DIV` under it that displays the placeholder... – Passerby Sep 12 '12 at 11:24
  • @benhowdle89 I would go with option 1 in valentinas option. – Saad Imran. Sep 12 '12 at 11:28
  • @SaadImran. actually I just tried it and it's no go. Not sure about IE, but in some browsers JS is not allowed to change that attribute because of security reasons, so the way to go would be to display it otside of the element, take a look at Sathish answer and this question: http://stackoverflow.com/questions/8628522/placeholder-not-working-for-internet-explorer – valentinas Sep 12 '12 at 11:39
  • or may be rip-off SO's method. they use jquery. – Sreenath S Sep 12 '12 at 11:40

1 Answers1

2

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.

Refered from Input placeholders for Internet Explorer

Community
  • 1
  • 1
Sathish
  • 4,403
  • 7
  • 31
  • 53