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上，没有其他浏览器中的这种行为（在用户写入内容之前保留占位符文本）。

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

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

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

JQuery在输入字段IE上添加/删除属性

1 个答案: