一尘不染

如何只允许输入数字(数字和小数点)?

angularjs

我是angularjs的新手。我想知道什么是只允许在文本框中键入有效数字的方法。例如,用户可以键入“ 1.25”,但不能键入“ 1.a”或“ 1
..”。当用户尝试输入下一个将使它成为无效数字的字符时,他将无法输入。

提前致谢。


阅读 587

收藏
2020-07-04

共1个答案

一尘不染

您可以尝试使用此指令来阻止将任何无效字符输入到输入字段中。( 更新
:这依赖于对模型具有明确知识的指令,这对于可重用性而言并不理想,请参见下面的可重用示例)

app.directive('isNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope) {    
            scope.$watch('wks.number', function(newValue,oldValue) {
                var arr = String(newValue).split("");
                if (arr.length === 0) return;
                if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.' )) return;
                if (arr.length === 2 && newValue === '-.') return;
                if (isNaN(newValue)) {
                    scope.wks.number = oldValue;
                }
            });
        }
    };
});

它还说明了以下情况:

  1. 从非空有效字符串到空字符串
  2. 负值
  3. 负十进制值

我在这里创建了一个jsFiddle,以便您可以看到它的工作原理。

更新

遵循亚当·托马斯(Adam
Thomas)关于不直接在指令中包括模型引用的反馈(我也认为这是最好的方法),我更新了jsFiddle以提供一种不依赖于此的方法。

该指令利用了本地作用域到父作用域的 双向绑定 。对指令内部的变量所做的更改将反映在父作用域中,反之亦然。

HTML:

<form ng-app="myapp" name="myform" novalidate> 
    <div ng-controller="Ctrl">
        <number-only-input input-value="wks.number" input-name="wks.name"/>
    </div>
</form>

角度代码:

var app = angular.module('myapp', []);

app.controller('Ctrl', function($scope) {
    $scope.wks =  {number: 1, name: 'testing'};
});
app.directive('numberOnlyInput', function () {
    return {
        restrict: 'EA',
        template: '<input name="{{inputName}}" ng-model="inputValue" />',
        scope: {
            inputValue: '=',
            inputName: '='
        },
        link: function (scope) {
            scope.$watch('inputValue', function(newValue,oldValue) {
                var arr = String(newValue).split("");
                if (arr.length === 0) return;
                if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.' )) return;
                if (arr.length === 2 && newValue === '-.') return;
                if (isNaN(newValue)) {
                    scope.inputValue = oldValue;
                }
            });
        }
    };
});
2020-07-04