Question

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

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

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

这是一个JSFiddle示例。

<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;
});

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

Chrome：

输入数字'1'
放入文本框中的数字。
在Javascript中获取“值”会返回“1”
有效性检查返回true
输入无效字符'a'。
字符放在文本框中，现在显示为'1a'。
在Javascript中获取“值”会返回“”。
有效性检查返回false
远离该字段，内容保留在文本框中。

的火狐： 与Chrome相同

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

示例1

输入数字'1'
放入文本框中的数字。
在Javascript中获取“值”会返回“1”
有效性检查返回true
输入无效字符'a'。
字符放在文本框中，现在显示为'1a'。
在Javascript中获取“值”返回“1a”。
有效性检查返回true
远离该字段，内容保留在文本框中。

示例2

输入无效字符'a'。
将字符放入文本框
在Javascript中获取“值”会返回“”。
有效性检查返回true
输入数字'1'
放入文本框的数字，现在显示'a1'。
在Javascript中获取“值”会返回“”
有效性检查返回true
远离字段，从文本框中清除内容。

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

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

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

Answer 1

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

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

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

1 个答案: