JQuery добавить / удалить атрибут в поле ввода IE

Question

Я использую несколько простых jquery для добавления вспомогательной информации в поле ввода, когда пользователь нажимает на нее.

$('.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/

Когда пользователь вводит сумму депозитаПоле, заполнитель $ 0.00 становится видимым - или, по крайней мере, в Chrome, Firefox и Edge.Однако это не работает в IE11.Это еще один из тех атрибутов, которые IE11 не поддерживает?

Answer 1

Вам не нужен JavaScript, чтобы добавить полезную информацию для ввода.Достаточно добавить атрибут placeholder="$0.00" к входным данным.

<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>

Проблема в том, что Internet Explorer 11 использует заполнители немного по-другому.Текст заполнителя отображается, когда пользователь не фокусируется на вводе, но, как только ввод получает фокус, заполнитель скрывается.Поэтому в Internet Explorer 11 такого поведения нет, как в других браузерах (сохранение текста заполнителя до тех пор, пока пользователь что-то не напишет).

Существует несколько полизаполнений для добавления поведения заполнителя в старые браузеры, но ониPolyfills будет работать только в том случае, если браузер не поддерживает атрибут placeholder, а Internet Explorer 11 поддерживает этот атрибут.

Редактировать Я добавил это решение, чтобы поддерживать тот же опыт для разных браузеров.

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