在 MS Edge 中，在输入类型= "number" 中输入文本后，占位符文本不会消失

Question

要查看问题，请尝试以下片段：

<div>
    <span>A number input:</span>
    <input type="number" placeholder="Enter some TEXT">
</div>
<div>
    <span>A text input:</span>
    <input type="text" placeholder="Enter some text">
</div>

input type="number"的行为：

• chrome ：无法输入文本。当数字输入时，占位符文本如预期的。
• Internet Explorer ：能够输入文本，但是当输入文本或数字时，占位符文本会如预期的那样消失。
• edge ：能够输入文本，当输入文本时，占位符文本不消失！

什么？！这真的只是一个疯狂的虫子吗？如果是这样，我希望合适的人知道这个错误，但是我找不到其他人抱怨的错误。

关于补偿此问题的最佳方法的任何想法？

Answer 1

您总是可以通过观看keypress事件手动过滤字母。这是一些jQuery代码，仅允许您在数字文本框中键入" 0123456789"：

$("input[type='number']").keypress(function(event){
    // If this key is not a number...
    if (event.which < 48 || event.which > 57)
  {
    event.preventDefault();
    return false;
  }
});

这是您的jsfiddle分叉包含此代码：https：//jsfiddle.net/o263wmnh/