限制用户在输入号码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位

回答

相关问题