Javascript HTML5有效性检查在IE中始终返回true

我试图使用HTML5有效性检查来确定字段内容是否确实有效。我有一个文本框字段，已设置为键入“number”。设置为“数字”的原因是当字段获得焦点时，在触摸设备上显示数字键盘

然而，我发现在Internet Explorer（IE10和IE11）中，无论字段中是否有数字或字母，有效性检查总是返回true

基本上，我希望实现的是能够使用有效性检查，然后调用我自己的自定义验证（我们有一个需要出现的自定义错误气泡，不能只使用浏览器开箱即用的错误气泡）

下面是一个JSFIDLE示例

HTML5表单验证测试仪


结果:
var numberField=document.getElementById（“numberField”）；
var r=document.getElementById（“结果”）；
numberField.addEventListener（“输入”，函数（）{
var值=numberField.value；
r、 innerHTML=
“
value=“+value+”，“+
“
checkValidity（）=”+numberField.checkValidity（）+”，“+
“
validity.valid=“+numberField.validity.valid；
});

每个浏览器中的行为如下所示：

铬：

输入一个数字“1”

放入文本框中的数字

获取Javascript中的“值”将返回“1”

有效性检查返回true

输入无效字符“a”

字符放置在文本框中，现在显示“1a”

获取Javascript中的“值”将返回“”

有效性检查返回false

选项卡远离该字段，内容仍保留在文本框中

Firefox: 和铬一样

即：
现在IE有了一些非常不同的行为。

示例1

输入一个数字“1”

放入文本框中的数字

获取Javascript中的“值”将返回“1”

有效性检查返回true

输入无效字符“a”

字符放置在文本框中，现在显示“1a”

获取Javascript中的“值”将返回“1a”

有效性检查返回true

选项卡远离该字段，内容仍保留在文本框中

示例2

输入无效字符“a”

字符被放入文本框中

获取Javascript中的“值”将返回“”

有效性检查返回true

输入一个数字“1”

放置在文本框中的数字，现在显示为“a1”

获取Javascript中的“值”将返回“”

有效性检查返回true

选项卡远离字段，文本框中的内容被清除

正如您应该能够在每个浏览器的JSFIDLE示例中看到的那样，IE中根本不存在这种行为。有人知道为什么IE在有效性调用中总是返回true吗

或者，是否有其他方法可以调用触摸设备上的数字键盘，该设备可以跨浏览器和设备工作

---

请注意，我们无法使用JQuery库。

这似乎是一个IE11错误，其中约束验证被破坏。如果您支持IE11，我认为您最好避免使用HTML5表单，而只使用JavaScript进行验证检查

---

IE9不支持checkValidity（）。因此，您的预期结果是失败的。是的，但它似乎从IE10开始就受到支持。我们必须支持IE11。我和IE11有同样的问题，这让我发疯。找到解决办法了吗？不，对不起，我一直没能解决这个问题。

<h1>HTML5 Form Validation Tester</h1>

<form>
    <input type="number" id="numberField" />  
    <br />
    <h3>Result:</h3>
    <div id="result"></div>
</form>

var numberField = document.getElementById("numberField");
var r = document.getElementById("result");

numberField.addEventListener("input", function() {
    var value = numberField.value;

    r.innerHTML =     
        "<br />value=" + value + ", " + 
        "<br />checkValidity()=" + numberField.checkValidity() + ", " + 
        "<br />validity.valid=" + numberField.validity.valid;
});