Question

如何阻止（使用Angular）用户输入一个简单数字中的4个以上的数字：

<input type="number">

我使用了ng-maxlength和max属性，但w3.org规范和官方网站Angular指定的那些属性不会阻止用户添加更多数字。

我想要的是输入以4位数字停止，比如以某种方式添加面具或其他东西。

Answer 1

以下是使用JavaScript执行此操作的方法：

<强> HTML

<input type="number" oninput="checkNumberFieldLength(this);">

JavaScript

function checkNumberFieldLength(elem){
    if (elem.value.length > 4) {
        elem.value = elem.value.slice(0,4); 
    }
}

如果适用于您的情况，我还建议对输入的Number元素使用min和max HTML属性。

JSFiddle

W3c: input Number

Answer 2

将ng-pattern与正则表达式一起使用

\ d：数字

{4}：4次

<input type="number" ng-pattern="/^\d{4}$/" />

Answer 3

好吧，正如有人说上面的maxlength不适用于类型编号的输入，所以你可以这样做：

<input type="text" pattern="\d*" maxlength="4">

当然，如果不要求输入类型=“数字”

，这样做

Answer 4

我会像你一样在你的控制器中创建一个函数

angular.module("my-app", [])
    .controller('my-controller', function($scope) {
        $scope.checkInput = function() {
            if (input.value.length > 4) {
                input.value = input.value.slice(0,4);
            }
        });
    });

然后在你看来你可以做这样的事情

<input type="number" max="9999" ng-input="checkInput()" />

警告：max属性仅适用于微调器。用户仍然可以输入高于该数字的数字。这是一个例子

＆＃13;

<input type="number" max="9999" />

＆＃13;

Answer 5

你可以使用modernizr和jquery来做到这一点。

我在这里做了一个例子：https://jsfiddle.net/5Lv0upnj/

$(function() {
    // Check if the browser supports input[type=number]
    if (Modernizr.inputtypes.number) {
        $('input[type=number]').keypress(function(e) {
            var $this = $(this),
                maxlength = $this.attr('maxlength'),
                length = $this.val().length;

            if (length >= maxlength)
                e.preventDefault();
        });
    }
});

将输入数字中的用户输入限制为4位数

5 个答案: