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 : stackoverflow.com/a/7225820/5644965

Lemayzeur
– Lemayzeur

2018-04-25 20:49:09 +00:00
Commented Apr 25, 2018 at 20:49 — Lemayzeur
– Lemayzeur, Commented Apr 25, 2018 at 20:49

muecas · Accepted Answer · 2018-04-26 16:53:27Z

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, 2018 at 16:53

answered Apr 25, 2018 at 20:51

muecas

4,3251 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

RPM Over a year ago

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.

muecas Over a year ago

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?

RPM Over a year ago

The requirement is for when the user clicks in the field, like the example here at 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.

muecas Over a year ago

In fact IE11 does not do the placeholder stuff that way. We can create some sort of workaround.

muecas Over a year ago

@RPM check my edit; i added a link to jsfiddle where i manage to achive the same placeholder behavior cross browser (including IE 11).

|

Collectives™ on Stack Overflow

JQuery Add/Remove Attribute On Input Field IE

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related