停止IE11从输入类型编号中删除文本

Question

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

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

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

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

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

JSFiddle demo

Answer 1

其他浏览器可能会保留此文本，但是将“aaa”输入input元素，其type属性设置为“数字”将表示您的元素的value属性为空，所以你的验证方法很可能认为这是缺乏内容而不是非数值。

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

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

我已经修改了您的JSFiddle演示以反映这一点：http://jsfiddle.net/e1132tg5/3/。

如果您需要接受input元素中的非数字数据，那么解决方案很简单就是将元素的type更改为“text”而不是“number”，并且完全依赖于您自己的用于处理验证的JavaScript验证方法（无论如何你想要它）。

<input type="text" >

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

另一种解决方案是告知用户，如果元素模糊且没有文本存在（IE自动删除之后），该字段必须是数字，但这将在SE's UserExperience site上更好地讨论。

Answer 2

只需使用正则表达式：

<input type="text" name="amount" id="amount"
    data-val="true"
    data-val-required="Amount field cannot be empty."
    data-val-regex-pattern="^[0-9+.\s]*$"
    data-val-regex="Amount field must be numeric"
    placeholder="Amount">
<span class="field-validation-valid" data-valmsg-for="amount" data-valmsg-replace="true"></span>