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

Question

To see the issue try this Snippet:

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

The behavior of input type="number" in:

• Chrome: Unable to input text. When numbers are input, placeholder text disappears as expected.
• Internet Explorer: Able to input text, but when text or numbers are input, placeholder text disappears as expected.
• Edge: Able to input text, and when text is input, placeholder text does not disappear!

What?! Is this really just a crazy bug in Edge? If so, I hope that the right people are aware of this bug, but I couldn't find any other people complaining of it.

Any ideas on the best way to compensate for this problem?

Answer 1

You could always manually filter out letters by watching the keypress event. Here's some JQuery code that will only allow you to type "0123456789" into a number textbox:

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

Here's your JSFiddle forked to include this code: https://jsfiddle.net/o263wmnh/