JQuery Add/Remove 输入字段 IE 上的属性

Question

我正在使用一些简单的 jquery 在用户点击输入字段时向输入字段添加帮助信息。

$('.amount').focus(function(){
     $(this).attr('placeholder', '[=12=].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="[=11=].00" 属性添加到输入中就足够了。

<div class="input-field">
  <input id="amount" class="amount" name="amount" type="text" maxlength="15" class="validate" placeholder="[=10=].00" />
  <label for="amount">Deposit Amount</label>
</div>

问题在于 Internet Explorer 11 使用占位符的方式略有不同。当用户没有将焦点放在输入上时显示占位符文本，但一旦输入获得焦点，占位符就会隐藏。所以在 Internet Explorer 11 上，没有其他浏览器中的行为（保留占位符文本，直到用户输入内容）。

有几个 polyfill 可以将占位符行为添加到旧浏览器，但这些 polyfill 仅在浏览器不支持占位符属性并且 Internet Explorer 11 支持该属性时才有效。

编辑我添加了这个解决方案，以保持跨浏览器的相同体验。

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

JQuery Add/Remove 输入字段 IE 上的属性

JQuery Add/Remove Attribute On Input Field IE

html

jquery

internet-explorer-11