JQuery Add/Remove Attribute On Input Field IE

Question

I'm using some simple jquery to add helper information to an input field when a user clicks into it.

$('.amount').focus(function(){
     $(this).attr('placeholder', '$0.00');
});
$('.amount').focusout(function(){
     $(this).removeAttr('placeholder');
});

<div class="input-field">
  <input id="amount" class="amount" name="amount" type="text" maxlength="15" class="validate" />
   <label for="amount">Deposit Amount</label>
</div>

https://jsfiddle.net/f9mvyz5f/1/

When the user enters the Deposit Amount Field, the placeholder $0.00 becomes visible - or at least it does in Chrome, Firefox and Edge. However this does not work in IE11. Is this another one of those attributes that IE11 doesn't support?

take a look here : https://stackoverflow.com/a/7225820/5644965 — Lemayzeur, Apr 25 '18 at 20:49

muecas · Accepted Answer · 2018-04-26T16:53:27.443

1

You don't need javascript to add usefull information to an input. Just by adding the placeholder="$0.00" attribute to the input will be enough.

<div class="input-field">
  <input id="amount" class="amount" name="amount" type="text" maxlength="15" class="validate" placeholder="$0.00" />
  <label for="amount">Deposit Amount</label>
</div>

The problem is that Internet Explorer 11 uses the placeholders in a slightly different way. The placeholder text is displayed when the user does not have focus on the input, but as soon as the input gain focus, the placeholder is hidden. So on Internet Explorer 11, there is no such behavior as in the other browsers (keeping the placeholder text until the user writes something in).

There are several polyfills to add the placeholder behavior to old browsers, but those polyfills will only work if the browser does not support the placeholder attribute, and Internet Explorer 11 does support the attribute.

Edit i added this solution, to maintain the same experience cross browser.

https://jsfiddle.net/f9mvyz5f/3/

edited Apr 26 '18 at 16:53

answered Apr 25 '18 at 20:51

muecas

4,265
1
8
18

I should clarify that I am using the materializecss framework. The snippet above is not styled with the library. I've updated my fiddle to better reflect the full user experience. – RPM Apr 26 '18 at 12:52
Adding the placeholder attribute thru JavaScript won’t change much on IE11. On focus you are adding the placeholder to the field, but if the field has a placeholder attribute IE11 will hide it on focus. So you will never be able to see the placeholder itself. Will you be ok showing the placeholder always o you want to show it only when the user focus the field? – muecas Apr 26 '18 at 13:07
The requirement is for when the user clicks in the field, like the example here at https://jsfiddle.net/f9mvyz5f/1/. I get the distinct feeling that this is another "IE just doesn't do this" item, because it seems to work in every other major browser. – RPM Apr 26 '18 at 13:22
In fact IE11 does not do the placeholder stuff that way. We can create some sort of workaround. – muecas Apr 26 '18 at 13:32
1

@RPM check my edit; i added a link to jsfiddle where i manage to achive the same placeholder behavior cross browser (including IE 11). – muecas Apr 26 '18 at 16:54
this is a great solution. I've tested cross browser and it's exactly what the doctor ordered. – RPM Apr 26 '18 at 17:06
@RPM glad i could help you! :) – muecas Apr 26 '18 at 17:16

JQuery Add/Remove Attribute On Input Field IE

1 Answers1