文本输入只允许在angularjs整数输入

问题描述：

我想设置html输入[编号] <input type="number" />允许只有整数输入（不浮点数）。文本输入只允许在angularjs整数输入

基本上，html input [number]允许'。'输入为浮动输入，我不想这样。

有没有一种方法可以在AngularJS中实现它？

的可能的复制[angularjs：只允许数字被输入到一个文本框（HTTP：//计算器.com/questions/16091218/angularjs-allowed-only-numbers-to-be-typed-into-a-text-box） –

请注意，问题是询问_integers_，而不是_numbers_。 –

答

input[type=number]按定义只接受整数作为输入。自己尝试一下。尝试输入字母，它不会允许你。

不需要JavaScript，因为它已经内置。您是否意指input[type=text]？

您可以通过角度指令来完成。它看起来像这样（不知道我的语法虽然）

app.directive('onlyNumbers', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      element.bind("keydown", function(event) { 
       if ((event.keyCode > 47 && event.keyCode < 58) && !event.shiftKey) { 
        event.preventDefault(); 
        return false; 
       } 
      }); 
     } 
    });

的语法可能有一些错误，但我会分解的基本公式。

由于我们正在处理输入元素，因此我们使用attribute指令是有道理的。我们可以通过将restrict属性设置为A.

因为我们将听按键事件，所以我们应该使用link函数。我们要监听事件，以检测何时开始按键。

要找到用户是否键入了一个数字，我们将使用keyCodes，其中数字键是从48到57分别代表0到9。但是，我们没有考虑特殊字符，它们需要按数字键。所以我们确保shift键没有被按下。

然后我们可以添加这个指令作为我们输入元素的一个属性。

<input type="text" only-numbers />

'input [type = number]'不会工作，因为它允许'。'被输入。 OP不希望输入浮点值 –

答

请找到小提琴 http://jsfiddle.net/8a4sg0mo/

angular.module('myApp', []).directive('numbersOnly', function(){ 
    return { 
    require: 'ngModel', 
    link: function(scope, element, attrs, modelCtrl) { 
     modelCtrl.$parsers.push(function (inputValue) { 

     if (inputValue == undefined) return '' 
     var transformedInput = inputValue.replace(/[^0-9]/g, ''); 
     if (transformedInput!=inputValue) { 
      modelCtrl.$setViewValue(transformedInput); 
      modelCtrl.$render(); 
     }   

     return transformedInput;   
    }); 
} 
    }; 
}); 

function MyCtrl($scope) { 
    $scope.number = '' 
}

这将允许输入唯一号码，采用了棱角分明的js做纯粹。

是的代码是工作。不幸的是，如果我在我的指令中使用它，我会得到一个错误“inputValue.replace不是一个函数”。我错过了什么？ –

答

这是如何实现的。

随着输入类型 - '文本'

指令：

app.directive('onlyNumbers', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, elm, attrs, ctrl) { 
      elm.on('keydown', function (event) { 
       if(event.shiftKey){event.preventDefault(); return false;} 
       //console.log(event.which); 
       if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) { 
        // backspace, enter, escape, arrows 
        return true; 
       } else if (event.which >= 48 && event.which <= 57) { 
        // numbers 0 to 9 
        return true; 
       } else if (event.which >= 96 && event.which <= 105) { 
        // numpad number 
        return true; 
       } 
       // else if ([110, 190].indexOf(event.which) > -1) { 
       //  // dot and numpad dot 
       //  return true; 
       // } 
       else { 
        event.preventDefault(); 
        return false; 
       } 
      }); 
     } 
    } 
});

HTML：

<input type="text" only-numbers>

随着输入类型 - '编号'

指令：

app.directive('noFloat', function() { 
return { 
    restrict: 'A', 
    link: function (scope, elm, attrs, ctrl) { 
     elm.on('keydown', function (event) { 
      if ([110, 190].indexOf(event.which) > -1) { 
       // dot and numpad dot 
       event.preventDefault(); 
       return false; 
      } 
      else{ 
       return true; 
      } 
     }); 
    } 
} 
});

HTML： <input type="number" step="1" no-float>

退房的Plunker

它适合我。谢谢 –

答

使用方式特性：

<input type="number" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required>

请参阅演示：https://jsfiddle.net/JBalu/vfbgrd5n/

可能会有帮助。

只是供参考：如果没有表格提交，这是行不通的。 –

答

完整的工作示例：以下自定义指令 工作得很好

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="AppCtrl"> 
 

 
    <input type="text" allow-numbers-only /> 
 

 
    <script> 
 
    var app = angular.module("myApp", []); 
 

 
    app.controller("AppCtrl", function($scope) { 
 
     $scope.title = "App" 
 
    }) 
 

 

 

 
    app.directive("allowNumbersOnly", function() { 
 
     return { 
 
     restrict: "A", 
 
     link: function(scope, element, attrs) { 
 
      element.bind("keydown", function(event) { 
 
      if (event.keyCode == 8) { 
 
       return false; 
 
      } else if (!(event.keyCode > 47 && event.keyCode < 58) || event.shiftKey) { 
 
       event.preventDefault(); 
 
       return false; 
 
      } 
 
      }); 
 

 

 

 
     } 
 
     } 
 
    }); 
 
    </script> 
 

 
</body> 
 

 
</html>

这将工作正常 –

文本输入只允许在angularjs整数输入

相关推荐