Question

我需要一个允许（并显示）仅数字字符作为输入的输入字段。我需要这个值是整数所以不是＆＃39;。＆＃39;允许角色。如何在angularjs中做到这一点？如果可能，如果在文本字段中粘贴字符串，如何仅显示数字？编辑：type = number允许点，我想只允许整数

Answer 1

试试这个可以按照你的期望工作。

var numInput = document.querySelector('input');

numInput.addEventListener('input', function(){
    var num = this.value.match(/^\d+$/);
    if (num === null) {
      this.value = "";
    }
});

<input type="number" min="0" step="1"/>

Answer 2

查看<input type="number"> https://www.w3schools.com/html/html_form_input_types.asp

否则，您需要创建自己的逻辑来处理用户输入。如果您不想使用HTML5输入，那么这是我的建议。

在angular2组件中，创建

<input [ngModel]="your_variable` (ngModelChange)="changeEvent($event)") />

changeEvent = (event) => {
//logic to handle different formats of your_variable
}

Answer 3

您只需使用 HTML 即可，而无需使用任何角度方法，例如

<input type="number" min="0" step="1"/>

使用 HTML 的另一种方法是使用pattern属性

<input type="text" pattern="\d*" />

Answer 4

您可以使用ng-pattern =＆＃34; / ^ [0-9] \ d * $ /＆＃34;对于该文本框，但类型应为该文本，您也可以使用下面的代码仅检查数字。

<input type="number" min="0"/>

Answer 5

您可以使用ng-pattern =＆＃34; / ^ [0-9] {1，} $ /＆＃34;和输入类型＆＃34;文本＆＃34;只允许数字。

Answer 6

**Directive: (with input type=text)**

app.directive('onlyNumbers', function () {
    return  {
        restrict: 'A',
        link: function (scope, elm, attrs, ctrl) {
            elm.on('keydown', function (event) {
                if(event.shiftKey){event.preventDefault(); return false;}
                //console.log(event.which);
                if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
                    // backspace, enter, escape, arrows
                    return true;
                } else if (event.which >= 48 && event.which <= 57) {
                    // numbers 0 to 9
                    return true;
                } else if (event.which >= 96 && event.which <= 105) {
                    // numpad number
                    return true;
                } 
                // else if ([110, 190].indexOf(event.which) > -1) {
                //     // dot and numpad dot
                //     return true;
                // }
                else {
                    event.preventDefault();
                    return false;
                }
            });
        }
    }
});


**HTML:**

<input type="text" only-numbers>

AngularJS：仅允许数字作为输入

6 个答案: