javascript - AngularJS 输入类型数字在输入字母时不会更新模型

Question

显然，某些浏览器允许用户在数字输入字段中输入字母(例如，Mac 上的 Chrome 46.0.2490.80 或 Ubuntu 上的 Chrome 41.0.2272.89)。此外，所有浏览器都接受字符“e”，因为在某些特定条件下它可以被视为有效数字。

现在，如果用户在该字段中输入任何字母，显然 Angular 无法更新模型。

你可以在这个 fiddle 中看到: http://jsfiddle.net/Y8Jg6/78/

<h1>Simple Data Binding with AngularJS</h1>
<br />
<div ng-app>
Name: <input type="number" ng-model="name" />
<br /><br />
   Welcome to AngularJS {{name}}
</div>

这是预期的行为吗？通过这种方式，有时模型不会反射(reflect)输入字段的值，这可能会导致意外错误(例如，我正在考虑字段验证)

Answer 1

如果您需要一个数字，那么该字段中的任何字母都会使模型值无效(当然，除非您提到的是“e”)。 Angular 1.4.x 使用此正则表达式来确定该数字是否允许:

var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))([eE][+-]?\d+)?\s*$/;

如您所见，“e”或“E”在这种情况下有效(但其他字母无效)。您的 jsfiddle 使用旧版本的 Angular，其中“e”字符似乎未正确解析，因此使模型无效。这里是一样的jsfiddle使用 Angular 1.4.7 正确解析数字(包含 e 或 E 的数字)。

您的应用可能会使用验证来确定模型是否已填充(如果它实际上是必填字段)。如果您确实想在模型中允许非数字，请考虑输入不同的“类型”。