Ограничения ввод пользователя во входном номере 4 цифр

Question

Как я могу предотвратить (usign может быть Угловым) пользователь вводить более 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); 
    } 
} 

Я также хотел бы предложить, чтобы сделать использование 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()" /> 

Предупреждение: Максимальный атрибут будет работать только для блесны. Пользователь по-прежнему сможет вводить числа, превышающие это. Вот пример

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