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

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

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

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

当然，如果不需要输入 type="number"

Answer 3

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

\d : 数字

{4} : 4 次

<input type="number" ng-pattern="/^\d{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 属性仅适用于微调器。用户仍然可以输入高于此值的数字。这是一个例子

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

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