Html <input type="number"> 不适用于 IE10

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13955731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 04:28:20  来源:igfitidea点击:

<input type="number"> not working in IE10

html

提问by Richard Anthony Hein

Although I'm pretty sure this was working yesterday or the day before, <input type="number" min="0" max="50" step="10" value="0" />, for example, no longer works in IE10. I've tested my browser with http://ie.microsoft.com/testdrive/HTML5/Forms/Default.htmland it's just not working anymore. Anyone else having this issue? Or, did it never work?

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

采纳答案by uyghurbeg

IE doesn't have support for input type="number" but you can use jQueryUI Spinner widget. It is very simple to use and it has many API's that friendly for developers.

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

Demo of jQuery-UI Spinner: https://jqueryui.com/spinner/

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

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

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

回答by Sampson

Internet Explorer 10 supports the number input. This is evident from a cursory examination of their documentation, as well as an attempt to use it within the browser itself. For example, attempting to place a letter in a number input will result in the value being cleared when the control loses focus.

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

You can also feature-detect support for number by programmatically doing the aforementioned test:

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

// 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" );

Run this test: http://jsfiddle.net/VAZwT/

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

It may very well be that you're equating progressively-enhanced UI (the spinners) with support for the control itself. I've seen this confuse a few people already. Somebrowsers augment supplement the number input with additional controls, but this is not (to my knowledge) a requirement for support.

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

A few simple tests for min, max, and stepon jsfiddle: http://jsfiddle.net/sDVK4/show/

对于一些简单的测试minmax以及step:对的jsfiddle http://jsfiddle.net/sDVK4/show/

回答by Cyril F

Please prefer the answerbelow from Sampsonas it's more appropriate

请选择下面的答案Sampson因为它更合适



IE doesn't have support for input type="number" but you can use a polyfill to make it work.

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

Here is the solution : http://html5please.com/#number

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

回答by JaredMcAteer

IE10 does not have Number support. Source: Can I use ... yet?

IE10 不支持数字。来源:我可以使用......吗?

Just verified on our Windows 8 test machine, there is no number spinner on their test drive site in IE10.

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

回答by Daniel

Microsoft has validation bugs/errors still with input type=number, this is in IE11 as well.

Microsoft 在 input type=number 的情况下仍然存在验证错误/错误,这也在 IE11 中。

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

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

Just as I was starting to like Internet Explorer again... Hopefully they can fix this in IE12, fingers crossed

就像我再次开始喜欢 Internet Explorer 一样......希望他们能在 IE12 中解决这个问题,手指交叉

回答by Silvio Biasiol

Here's the solution I developed, it works pretty well I think, hope it helps someone

这是我开发的解决方案,我认为它工作得很好,希望它可以帮助某人

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)"/>