限制输入数字小数点前后的数字

Question

如何限制小数点前后的数字，比如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>

Answer 1

您可以在输入字段上添加一个onchange事件，并调用一个函数，该函数使用regex验证当前输入值，并与用户通信。

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

你也可以用angular编写一个指令来处理同样的问题。

Answer 2

这可以用一个简单的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)

Answer 3

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

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

文档：https://docs.angularjs.org/api/ng/directive/ngPattern

Answer 4

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

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 }}

Answer 5

经过数小时的工作，我创建了处理按键事件的java脚本函数。数字可以是小数分隔符前的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;
}