使用Google Chrome中的AngularJS重置包含文本的HTML5"数字"字段

Question

用例

我有一个数字字段,专门说" 输入一个数字 ".最终用户总是会输入一个字符串.当用户使用Google Chrome点击"重置"按钮时,包含文字的数字字段将不会重置.

要求是:

• 用户无法升级以遵循说明.:d
• 单击重置按钮应将数字默认为未定义.
• 理想情况下,我们希望保留type="number"属性,因为它允许键盘在移动设备上弹出.

码

有一个jsFiddle演示版.

角度模板

<div ng-app="app" ng-controller="ctrl">
    <p>
        Enter a string into the "number" field. Clicking any of the buttons
        will not clear the field.
    </p>
    <p>
        Enter a number into the "number" field. Clicking any of the buttons
        will clear the field.
    </p>
    <input type="number" ng-model="someValue" placeholder="Enter a number"/>
    <button type="button" ng-click="set('hello, world!')">Set to Hello, World!</button>
    <button type="button" ng-click="set(undefined)">Set to undefined</button>
    <button type="button" ng-click="set('')">Set to empty string</button>
    <button type="button" ng-click="set(0)">Set to zero</button>
</div>

角度应用和控制器

angular.module('app', [])
.controller('ctrl', function($scope) {
    $scope.someValue = undefined;
    $scope.set = function(val) {
        $scope.someValue = val;
    };
});

题

• 如何将数字字段重置为在Angular中包含无效值的未定义(或空白)？

Answer 1

解决方案

似乎可以使用指令来解决这个问题，但我希望有一个侵入性较小的解决方案，因为该指令将触发任何输入。但是，它执行了所需的操作。看来，在数字字段中输入字符串会破坏 Google Chrome 和 Angular 的功能。

指示

.directive('input', function () {
    return {
        restrict: 'E',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (attrs.type.toLowerCase() !== 'number') {
                return;
            } //only augment number input!
            ctrl.$formatters.push(function (value) {
                return value ? parseFloat(value) : null;
            });
        }
    };
});