限制用戶在輸入號碼4位

輸入

如何防止（usign也許角）從這樣一個在一個簡單的數字輸入超過4個數字用戶：限制用戶在輸入號碼4位

<input type="number">

我用ng-maxlength和max屬性，但w3.org規範和官方網站Angular指定的屬性不會阻止用戶添加更多數字。

我想要的是輸入停止在4位數字，如添加在某種程度上的面具或東西。

來源

2016-07-07 Mathemagician

看到http://stackoverflow.com/questions/24945192/how-to-make-jquery-inputmask-work-with-input-type-號碼 – Jorrex

使用maxlength =「4」，而不是ng-maxlength – Vi100

這意味着它不再可能嗎？（正如帖子所說） – Mathemagician

這是一種用做它的JavaScript：

HTML

的JavaScript

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

我還建議儘量使用min和max HTML屬性爲輸入號碼元素，它是否適用於你的情況。

JSFiddle

W3c: input Number

來源

2016-07-07 15:07:04

使用ng-pattern用正則表達式

\ d：數字

{4}：4次

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

來源

2016-07-07 15:02:21 Weedoze

它不起作用。用戶仍然可以輸入4位以上的數字。 – Mathemagician

嗯，正如有人指出上述最大長度不符合的型號投入工作，這樣你就可以這樣來做：

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

當然

，這如果不是輸入類型=「數字」

來源

2016-07-07 15:07:35 Vi100

我會在你的控制器中創建一個函數這樣

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" />

來源

2016-07-07 15:07:52

嘿，順便說一句，只有'max =「9999」'hackaround完美工作！ –

不，您仍然可以通過手動鍵入數字來解決此問題。它只適用於微調器 –

你可以做到這一點使用的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(); 
     }); 
    } 
});

來源

2016-07-07 15:20:03 Wilmer

他甚至沒有提到jQuery，它可以很容易地與Angular完成，沒有任何其他庫。 – developer033

限制用戶在輸入號碼4位

回答

相關問題