在MS Edge中，在input type =“number”中输入文本后，占位符文本不会消失。 [英] In MS Edge, placeholder text doesn't disappear after entering text in input type="number"

问题描述

=truedata-babel =false>

< div> < span>数字输入：< / span> < input type =numberplaceholder =Enter some TEXT>< / div>< div> < span>文字输入：< / span> < input type =textplaceholder =Enter some text>< / div>

$ b

$ input type =number的行为：

• Chrome ：无法输入文字。输入数字后，占位符文本会按预期消失。
Internet Explorer ：可输入文本，但输入文本或数字时，占位符文本会按预期消失。

• 边缘：能够输入文本，并且在输入文本时，占位符文本不会消失！

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

任何关于最佳方式的想法你可以通过观看按键来手动过滤掉字母c $ c>事件。这里有一些JQuery代码，它只允许你在数字文本框中输入0123456789：
$ b $ $ $ $ $（input [type = 'number']）。keypress（function（event）{
//如果这个键不是数字...
if（event.which< 48 || event.which> 57 ）
{
event.preventDefault（）;
return false;
}
}）;


以下是您的JSFiddle分支以包含此代码： https://jsfiddle.net/o263wmnh/

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?

解决方案

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/

这篇关于在MS Edge中，在input type =“number”中输入文本后，占位符文本不会消失。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！