【发布时间】：2015-02-03 02:41:08
【问题描述】：
我正在尝试使用 HTML5 有效性检查来确定字段内容是否确实有效。我有一个文本框字段，我设置为输入“数字”。设置为“数字”的原因是当字段获得焦点时在触摸设备上显示数字键盘。
但是，我发现在 Internet Explorer（IE10 和 IE11）中，无论字段中是否包含数字或字母，有效性检查始终返回 true。
基本上我希望实现的是能够使用有效性检查然后调用我自己的自定义验证（我们有一个需要出现的自定义错误气泡，不能只使用浏览器开箱即用的错误气泡）。
这是一个 JSFiddle 示例。
http://jsfiddle.net/1samnzoo/16/
<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;
});
每个浏览器中的行为如下：
铬：
- 输入数字“1”
- 输入文本框中的数字。
- 在 Javascript 中获取“值”返回“1”
- 有效性检查返回 true
- 输入无效字符“a”。
- 字符被放入文本框中，现在显示“1a”。
- 在 Javascript 中获取“值”返回“”。
- 有效性检查返回错误
- Tab 离开字段，内容保留在文本框中。
火狐：
与 Chrome 相同
IE：
现在 IE 有一些非常不同的行为。
示例 1
- 输入数字“1”
- 输入文本框中的数字。
- 在 Javascript 中获取“值”返回“1”
- 有效性检查返回 true
- 输入无效字符“a”。
- 字符被放入文本框中，现在显示“1a”。
- 在 Javascript 中获取“值”返回“1a”。
- 有效性检查返回 true
- Tab 离开字段，内容保留在文本框中。
示例 2
- 输入无效字符“a”。
- 字符被放入文本框
- 在 Javascript 中获取“值”返回“”。
- 有效性检查返回 true
- 输入数字“1”
- 放置在文本框中的数字，现在显示为“a1”。
- 在 Javascript 中获取“值”返回“”
- 有效性检查返回 true
- Tab 离开字段，从文本框中清除内容。
正如您应该能够在每个浏览器的 jsfiddle 示例中看到的那样，该行为根本不存在于 IE 中。有谁知道为什么 IE 在有效性调用中总是返回 true ？
或者，是否有任何其他方法可以在跨浏览器和设备的触控设备上调用数字键盘。
请注意，我们无法使用 JQuery 库。
【问题讨论】：
-
checkValidity() 不受 IE9 支持。因此，您的预期结果失败了。
-
是的，但它看起来像是从 IE10 开始支持的。 msdn.microsoft.com/en-us/library/ie/hh772948%28v=vs.85%29.aspx。我们必须支持 IE11。
-
我在 IE11 上遇到了同样的问题，这让我抓狂。运气好能找到解决办法吗？
-
不抱歉，一直没能解决这个问题。
标签： javascript html