Limit the user's input in an input number to 4 digits

Question

How can I prevent (usign maybe Angular) the user from entering more than 4 numbers in a an simple number like this one :

<input type="number">

I used ng-maxlength, and max attributes, but those attributes as specified by w3.org specs and the official website Angular, do not prevent the user from adding more numbers.

What I want is that the input stops in 4 digits, like adding in somehow a mask or something to it.

see http://stackoverflow.com/questions/24945192/how-to-make-jquery-inputmask-work-with-input-type-number — Jorrex, Jul 07 '16 at 15:00
You can do it by using a directive. Check http://stackoverflow.com/questions/24701205/how-can-you-limit-the-value-from-input-using-angularjs — Arun Ghosh, Jul 07 '16 at 15:03
@Vi100 `maxlength`is not a valid attribute for a Number input — Jeff Noel, Jul 07 '16 at 15:04
Here are some solutions: http://stackoverflow.com/questions/8354975/how-to-add-maxlength-for-html5-input-type-number-element — Jin Wang, Jul 07 '16 at 15:10

Jeff Noel · Accepted Answer · 2016-07-07T15:15:56.303

6

Here is a way to do it using JavaScript:

HTML

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

JavaScript

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

I would also suggest to make use of the min and max HTML attributes for the input Number element, if it applies in your case.

JSFiddle

W3c: input Number

edited Jul 07 '16 at 15:15

answered Jul 07 '16 at 15:07

Jeff Noel

7,500
4
40
66

Vi100 · Answer 2 · 2016-07-07T15:15:22.063

4

Well, as somebody stated above maxlength doesn't work with inputs of type number, so you can do it this way:

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

of course, this will do if it's not a requirement to have input type="number"

edited Jul 07 '16 at 15:15

answered Jul 07 '16 at 15:07

Vi100

4,080
1
27
42

score 2 · Answer 3 · answered Jul 07 '16 at 15:02

2

Using ng-pattern with a regex

\d : digits

{4} : 4 times

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

answered Jul 07 '16 at 15:02

Weedoze

13,683
1
33
63

Richard Hamilton · Answer 4 · 2016-07-07T15:09:59.967

1

I would create a function in your controller like this

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

Then in your view you can do something like this

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

Warning: The max attribute will only work for the spinner. The user will still be able to enter numbers higher than that. Here's an example

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

edited Jul 07 '16 at 15:09

answered Jul 07 '16 at 15:07

Richard Hamilton

25,478
10
60
87

Hey by the way, only the `max="9999"` hackaround workd perfectly ! – Yassine Badache Jul 07 '16 at 15:08
No, you can still go around this by typing in the numbers manually. It only works for the spinner – Richard Hamilton Jul 07 '16 at 15:10

score 0 · Answer 5 · answered Jul 07 '16 at 15:20

You can do that using modernizr and jquery.

I've made an example here: 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();
        });
    }
});

He doesn't mentioned even jQuery and it can easily done with Angular without any other library. — developer033, Jul 07 '16 at 15:44

Limit the user's input in an input number to 4 digits

5 Answers5