通过 AngularJS 处理 Firefox 中的数字输入
Handle Number Input in Firefox via AngularJS
我在Firefox中遇到了一个奇怪的问题,希望有人能向我解释一下。我有一个 AngularJS 控制器,其方法与表单中各种输入控件的ng-change
相关联,包括标记为number
输入的控件。此方法的逻辑是,如果正确设置了任何一个绑定范围变量,则将另一个范围变量设置为 true。这基本上是表单验证的尝试,其中需要任何一个(或多个)输入。
例:
app.controller('test', function($scope) {
$scope.num = 0;
$scope.name = "";
$scope.valid = false;
$scope.inputChange = function() {
console.log('Input changed');
$scope.valid = ($scope.num > 0) || ($scope.name.length > 0);
}
});
和形式:
<form name="numberTest" ng-app="myApp" ng-controller="test">
<input ng-model="name" name="name" type="text" ng-change="inputChange()"/>
<input type="number" ng-model="num" name="n" id="n" ng-change="inputChange()"/>
<input type="button" value="Go" ng-disabled="!valid"/>
</form>
这一切都在 Chrome 中运行良好,但在 Firefox 中,当在数字输入中输入非数字文本并且文本框本身确实在其中获取此虚假数据时,此ng-change
处理程序会触发,尽管模型没有更新。这会导致一种混乱的状态,即 num 文本框中存在未绑定到 AngularJS 模型但用户可以单击该按钮的无效数据。Chrome 不会出现此问题,因为它不会在输入控件中呈现非数字数据。
如何检测(和处理)这种情况?输入控件显示的文本无效且未绑定到绑定模型。
我当然愿意接受替代实现来实现相同的效果。AngularJS版本是1.3.0。
示例 plunker 在 Firefox 中运行以查看"不良"行为
我最终发现了这些数字输入的$valid
属性,这似乎满足了我的需求:
- 如果为空,则返回 true
- 如果控件中存在非数字数据,则返回 false
所以,我更新的按钮:
<input type="button" value="Go" ng-disabled="!valid || !numberTest.n.$valid"/>
相关文章:
- 是否可以在数字输入框中的小按钮中添加事件侦听器
- 用于数字输入的正则表达式
- AngularJs:在数字输入字段中设置验证的条件最小值和最大值
- 敲除:如何对两个数字输入进行双向绑定
- 在数字输入上按回车键时提交
- 如何显示正好 2 位数字的 html 数字输入的输入值
- 如何使用鼠标或触摸更改数字输入字段
- 为数字输入添加特殊字符
- 在一些Android设备/Chrome上,HTML5数字输入中没有小数点
- 仅HTML输入除^之外的数字输入
- 如何处理 jQuery 中的数字输入更改
- 使用 js 禁用文本输入中的数字输入
- 角度JS数字输入和默认值
- 如何根据数字输入的总和限制数字输入
- 如何更改数字输入的格式
- 从给定的最大数字中减去并输出数字输入值
- 如何使此数字输入接受逗号
- 如何将加号和减号附加到数字输入和更新值
- 在我更改数字输入时获取要更改的范围的内容
- 通过 AngularJS 处理 Firefox 中的数字输入