<input type="number"> 在 IE10 中不起作用答案

【问题标题】：<input type="number"> not working in IE10<input type="number"> 在 IE10 中不起作用
【发布时间】：2012-12-19 15:31:34
【问题描述】：

虽然我很确定这是昨天或前一天的工作，但 <input type="number" min="0" max="50" step="10" value="0" />，例如，在 IE10 中不再工作。我用http://ie.microsoft.com/testdrive/HTML5/Forms/Default.html 测试了我的浏览器，但它不再工作了。还有谁有相同的问题吗？或者，它从来没有用过？

【问题讨论】：

它在 IE 11 caniuse.com/#feat=input-number 中也不起作用
developer.microsoft.com/en-us/microsoft-edge/platform/issues/…
新人！请不要使用不允许非数字输入的 JavaScript 回答这个问题。我们已经有几个（数千个）与此相关的问题，包括 HTML text input allow only numeric input、How to allow only numeric (0-9) in HTML inputbox using jQuery? 和 How to make HTML input tag only accept numerical values? 等等。

标签： html

【解决方案1】：

Internet Explorer 10 支持数字输入。从对their documentation 的粗略检查以及在浏览器本身中使用它的尝试中可以明显看出这一点。例如，尝试在数字输入中放置一个字母将导致在控件失去焦点时清除该值。

您还可以通过以编程方式执行上述测试来检测对数字的支持：

// Create the element
var element = document.createElement( "input" );

// Give it the number property and invalid contents
element.type = "number";
element.value = "qwerty";

// Value should be empty
alert( element.value ? "Not Supported" : "Supported" );

运行此测试：http://jsfiddle.net/VAZwT/

很可能您将逐步增强的 UI（微调器）等同于对控件本身的支持。我已经看到这让一些人感到困惑。一些浏览器通过额外的控件来补充数字输入，但这不是（据我所知）支持的要求。

在 jsfiddle 上对 min、max 和 step 进行一些简单的测试：http://jsfiddle.net/sDVK4/show/

【讨论】：

数字字段 e。 G。在 IE 10/11 中接受“2werwer”

【解决方案2】：

请更喜欢下面的the answer而不是Sampson，因为它更合适

IE 不支持 input type="number" 但您可以使用 polyfill 使其工作。

这里是解决方案：http://html5please.com/#number

【讨论】：

谢谢，我猜是 polyfill 坏了（不是我写的，只是调试），因为它可以工作。干杯。
IE 10 确实支持数字输入类型，只是渲染得不是很好。你不是在寻找一个 polyfill，而是一个完整的微调控件。
@scravy 这是轻描淡写的说法。它会清除非数字值，甚至不会告诉用户发生了什么。
目前没有适用于 Angular 的 polyfill。

【解决方案3】：

IE10 不支持数字。来源：Can I use ... yet?

刚刚在我们的 Windows 8 测试机上进行了验证，他们的 IE10 测试驱动站点上没有数字微调器。

【讨论】：

IE 10 部分支持数字输入。在放置任何非数字值时，它只会清除输入字段（支持），但从不显示微调器（不支持）
在谷歌浏览器中，我们不能将任何不是数字的东西放入该字段中。在 IE 和 MS Edge 中，在字段中放置字母字符会在失去焦点时将该字段重置为 0，并以红色突出显示该字段。这不是一个期望的行为，它应该被修复。

【解决方案4】：

Microsoft 仍然存在输入 type=number 的验证错误/错误，这在 IE11 中也是如此。

https://connect.microsoft.com/IE/feedback/details/850187/html5-constraint-validation-is-broken-in-ie11-for-input-type-number

就像我又开始喜欢 Internet Explorer 一样...希望他们能在 IE12 中解决这个问题，祈祷

【讨论】：

他们已在最新的 Edge 版本中将其标记为已解决。
我什至无法从 MS Edge 复制版本信息，我花了一些时间才找到版本（它是 25.10586）。无论如何，输入 type="number" 不会阻止我输入任何字母。如果输入了字母并且我离开了该字段，它会显示 0 而不是之前的值。我宁愿它不允许我输入字母。
链接现在重定向到：docs.microsoft.com/en-us/collaborate/connect-redirect。

【解决方案5】：

这是我开发的解决方案，我认为效果很好，希望对某人有所帮助?

function handleKeyPress(e) {
    let newValue = e.target.value + e.key;
    if (
    // It is not a number nor a control key?
    isNaN(newValue) && 
    e.which != 8 && // backspace
    e.which != 17 && // ctrl
    newValue[0] != '-' || // minus
    // It is not a negative value?
    newValue[0] == '-' &&
    isNaN(newValue.slice(1)))
        e.preventDefault(); // Then don't write it!
}

Insert a number:
<input onKeyPress="handleKeyPress(event)"/>

【讨论】：

请不要用不允许非数字输入的 JavaScript 回答这个问题。我们已经有几个（数千个）关于此的问题，包括HTML text input allow only numeric input、How to allow only numeric (0-9) in HTML inputbox using jQuery? 和How to make HTML input tag only accept numerical values? 等等。
与上述功能类似，但不允许负数并允许数字粘贴：`` function FilterInput(e) { if (isNaN(e.key) && e.key !== 'Backspace' && ! (e.key === 'v' && e.ctrlKey === true) && e.key !== 'Tab' ) e.preventDefault(); }; ```

【解决方案6】：

IE 不支持 input type="number" 但您可以使用 jQueryUI Spinner 小部件。它使用起来非常简单，并且有许多对开发人员友好的 API。

jQuery-UI Spinner 演示： https://jqueryui.com/spinner/

jQuery-UI Spinner 的 API https://api.jqueryui.com/spinner/#event-change

【讨论】：

与上述功能类似，但不允许负数并允许数字粘贴：`` function FilterInput(e) { if (isNaN(e.key) && e.key !== 'Backspace' && ! (e.key === 'v' && e.ctrlKey === true) && e.key !== 'Tab' ) e.preventDefault(); }; ```