在 MS Edge 中，在 input type="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：可以输入文字，输入文字时占位符文字不消失！

什么？！这真的只是 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/

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

In MS Edge, placeholder text doesn't disappear after entering text in input type="number"

html

html-input

microsoft-edge