文本輸入只允許在angularjs整數輸入

我想設置html輸入[編號] <input type="number" />允許只有整數輸入（不浮點數）。文本輸入只允許在angularjs整數輸入

基本上，html input [number]允許'。'輸入爲浮動輸入，我不想這樣。

有沒有一種方法可以在AngularJS中實現它？

2015-12-01 Cheetah Felidae

的可能的複製[angularjs：只允許數字被輸入到一個文本框（HTTP：//計算器.com/questions/16091218/angularjs-allowed-only-numbers-to-be-typed-into-a-text-box） –

請注意，問題是詢問_integers_，而不是_numbers_。 –

-2

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

來源

2015-12-01 05:37:39

'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做純粹。

來源

2015-12-01 05:40:44 AurA

是的代碼是工作。不幸的是，如果我在我的指令中使用它，我會得到一個錯誤「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

來源

2015-12-01 07:03:37

它適合我。謝謝 –

使用方式特性：

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

請參閱演示：https://jsfiddle.net/JBalu/vfbgrd5n/

可能會有幫助。

來源

2015-12-01 07:47:22

只是供參考：如果沒有表格提交，這是行不通的。 –

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

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

來源

2018-02-26 06:33:51

這將工作正常 –

文本輸入只允許在angularjs整數輸入

回答

相關問題