如何只允许一个数（数字和小数点），以在输入键入？ [英] How to allow only a number (digits and decimal point) to be typed in an input?

问题描述

我是新来angularjs。我想知道什么是只允许输入到一个文本框有效数字的方式。
例如，用户可以键入1.25，但不能输入1.A或1 ..。当用户试图输入下一个字符，这将使其成为一个无效的号码，他不能输入。

I am new to angularjs. I am wondering what is the way to allow only a valid number typed into a textbox. For example, user can type in "1.25", but cannot type in "1.a" or "1..". When user try to type in the next character which will make it an invalid number, he cannot type it in.

先谢谢了。

推荐答案

您可以试试这个指令被输入到输入字段停止任何无效字符。 （更新：这依赖于具有的模式，这是不理想的可重用性的显性知识的指令，请参见下面的可重复使用的例子）

You could try this directive to stop any invalid characters from being entered into an input field. (Update: this relies on the directive having explicit knowledge of the model, which is not ideal for reusability, see below for a re-usable example)

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;
                }
            });
        }
    };
});

这也说明了这些情况：

It also accounts for these scenarios:

1. 从一个非空的有效字符串将空字符串


2. 负值


3. 负十进制值

我创建了一个的jsfiddle这里所以你可以看到它是如何工作的。

I have created a jsFiddle here so you can see how it works.

更新

继亚当·托马斯的关于不包括直接模型引用指令内（我也认为是最好的办法）我已经更新了我的 中的jsfiddle提供不依赖于这种方法。

Following Adam Thomas' feedback regarding not including model references directly inside a directive (which I also believe is the best approach) I have updated my jsFiddle to provide a method which does not rely on this.

该指令使得使用双向绑定的本地范围母公司范围。变量做出的指令内的变化将反映在父范围，反之亦然。

The directive makes use of bi-directional binding of local scope to parent scope. The changes made to variables inside the directive will be reflected in the parent scope, and vice versa.

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>

角code：

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;
                }
            });
        }
    };
});

这篇关于如何只允许一个数（数字和小数点），以在输入键入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！