限制输入数字

时间:2016-03-30 11:40:16

标签: javascript angularjs input

如何限制小数点前后的数字,如123.123,所以它之前可以有最多3个数字。最多3个数字。

   <div class="form-group">
  <input type="number" class="form-control" name="ta" id="ta" placeholder="ta" ng-model="ta.kol" ng-maxlength="15"/>
  <p ng-show="taForm.kol.$error.maxlength" class="help-block">Max 15 symbols !</p>
   </div>

5 个答案:

答案 0 :(得分:1)

如果您只是在输入中添加一个事件监听器,然后在小数点上拆分输入,然后检查两个部分的长度并采取相应的行动,这可以通过一个简单的javascript来解决。

https://jsfiddle.net/pk07net6/

function checkNumbers()
{
    console.log(this.value);
  var numbers = this.value.split('.');
  var preDecimal = numbers[0];
  var postDecimal = numbers[1];

  if (preDecimal.length>3 || postDecimal.length>3)
  {
        alert("Max 3 numbers before and after the decimal point.")
    this.select();
  } 
}

//ADD LISTENER TO INPUT
var input = document.getElementById("numberInput");
console.log(input);
input.addEventListener("change", checkNumbers)

答案 1 :(得分:1)

您可以在输入字段上添加onchange事件,并调用一个函数,该函数使用正则表达式验证当前输入值并将其传达给用户。

<强> Regex : ^[0-9]{0,3}.?[0-9]{0,3}$

JS代码验证:

function validateNumberInput(inputNumber){
     return number.search(/^[0-9]{0,3}.?[0-9]{0,3}$/) == 0 ? true : false;
}

你也可以用角度来编写一个可以处理相同的指令。

答案 2 :(得分:1)

您可以将ng-pattern与正则表达式一起使用:

<input ng-pattern="/^[0-9]{1,3}(\.\d{0,3})?/" />

docs:https://docs.angularjs.org/api/ng/directive/ngPattern

答案 3 :(得分:0)

对于该分数,它非常简单,因为您可以使用角度数过滤器。至于数字前面的数字,你应该创建一个这样的过滤器:

app.filter('beforeDigit', function ($filter) {
   return function (input) {
    if (input>1000) 
       return (input % 1000)
    elseif(input<1000)
       return input; 
   };
});

所以最后你会得到这样的东西:

{{val | filter:{number:3}, filter:beforeDigit }}

答案 4 :(得分:-1)

经过几个小时的工作,我创建了java-script函数,它可以处理keypress事件。小数分隔符前面的数字可以是8个字符,小数点分隔符后面可以是2个字符。

https://codepen.io/dumbelovic/pen/bvdXXq

function BeforeAfter(e, obj) {
sepDec = "."
var keycode;
var fieldval = obj.value;

if (window.event) keycode = window.event.keyCode;
else if (e) { keycode = e.which; }
else { return true; }

// denided first charatcter to be zero
if (fieldval == "" && keycode == 48)
    return false;

// denided first character to be decimal point
if (fieldval == "" && (keycode == 44 || keycode == 46))
    return false;

// enter first decimal point, 
// but every next try to eneter decimal point return false
if (fieldval != "" && ((keycode == 44 || keycode == 46))) {
    if (fieldval.indexOf(sepDec) < 0) {
        var newValue = fieldval + sepDec;
        $(obj).val(newValue);
    }
    return false;
}



var splitfield = fieldval.split(sepDec);

var beforeDecimalPoint;
var afterDecimalPoint;

if (splitfield.length == 1) {
    beforeDecimalPoint = splitfield[0];
    afterDecimalPoint = "";
}
else if (splitfield.length == 2) {
    beforeDecimalPoint = splitfield[0];
    afterDecimalPoint = splitfield[1];
}

if (beforeDecimalPoint.length == 8 && keycode != 8 && keycode != 0) {
    if (obj.selectionStart >= 0 && obj.selectionStart <= 8)
        return false;
}

if (afterDecimalPoint.length == 2 && keycode != 8 && keycode != 0) {
    if (obj.selectionStart >= beforeDecimalPoint.length + 1 && obj.selectionStart <= beforeDecimalPoint.length + 1 + 2)
        return false;
}


return true;
}