html - 停止 IE11 从输入类型数字中删除文本

Question

在 Internet Explorer 11 中，如果您有以下内容:

<input type="number" min="1" max="12" pattern="[0-9]*" >

当用户尝试输入字母而不是数字时，浏览器只会清除输入。这种行为是不可取的，因为我希望我们的验证来处理这个，而不是浏览器自动为我做这件事。

有人知道如何改变这种行为吗？

我使用数字输入类型进行验证并在 iOS 中获得正确的键盘。

JSFiddle demo .

Answer 1

其他浏览器可能会保留此文本，但是在 type 属性设置为“number”的 input 元素中输入“aaa”将意味着您的元素的 value 属性为空，因此您的验证方法很可能会将其视为缺少内容而不是非数字值。

<input type="number" value="aaa" />

console.log(document.querySelector('input').value);
> ""

我已经更改了您的 JSFiddle 演示以反射(reflect)这一点:http://jsfiddle.net/e1132tg5/3/ .

如果您需要在 input 元素中接受非数字数据，那么解决方案非常简单，只需将元素的 type 更改为“text”而不是“number”并完全依赖您自己的 JavaScript 验证方法来处理验证(无论如何看起来您都想要)。

<input type="text" >

您始终也可以使用 JavaScript 来确定用户是否在移动设备上查看您的网站，并动态更改 type 属性。

另一种解决方案是，如果元素模糊且没有文本(在 IE 自动删除后)，则通知用户该字段必须是数字，但这最好在 SE's UserExperience site 上讨论。 .