For ng-keyup unable to do event.preventDefault() and ng-keypress lagging behind a value for input type number in angular.js

Question

Problem: Input type number with min, max is not working while typing in input box we can type less/more than min, max value. (but by the arrow of input type number it is working fine.)

Requirement: restrict to enter the value in input type number that not in range of min and max

"Using Angular.js want to solve this problem without an extra directive and without changing the input type number to text." Plunker

ng-keyup: unable to do event.preventDefault() why? This is why we can type more/less than min or max value. I am getting the correct value while changing.

ng-keypress: lagging behind 1 value. So the first value is undefined (this is a problem for my question). I am able to to do event.preventDefault();

Shold be: ng-keyup with event.preventDefault(); or ng-keypress with correct order

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myScore;
    $scope.limit = function(event, myScore){
       console.log(event, $scope.myScore, myScore);
       // do your code here myScore should be between (min-max)
       event.preventDefault(); 

    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<!-- <input type="number" ng-model="myScore" min="0" max="200" ng-keypress="limit($event, myScore)"> -->

<input type="number" ng-model="myScore" min="0" max="200" ng-keyup="limit($event, myScore)">
{{myScore}}


</div>

Scaramouche · Accepted Answer · 2020-04-06T18:53:54.127

0

Try using a previous value to fall back to. Then, since $scope.myScore will be undefined whenever it is given a value that falls outside of what's permitted by your input, check for that in your IF.

HIH

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.limit = function(e) {
    console.log( $scope.prevScore,$scope.myScore)
    if ($scope.myScore === undefined){
      $scope.myScore = $scope.prevScore
    }
    
    $scope.prevScore = $scope.myScore;
 }
 
 $scope.forInitialValue = function(e) {
    if ($scope.myScore === undefined){
      $scope.myScore = ""
    }
    
    $scope.prevScore = $scope.myScore;
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="number" ng-model="myScore" min="0" max="200" ng-change="limit($event)" ng-keydown="forInitialValue($event)"> {{myScore}}
</div>

edited Apr 06 '20 at 18:53

answered Apr 06 '20 at 18:25

Scaramouche

3,188
2
20
46

Requirement: restrict to enter the value in input type number that not in range of min and max – Ankit Pandey Apr 06 '20 at 18:34
@AnkitPandey What I understand from that is: only numbers between 0 and 200 can be entered. is that correct? in my answer you cannot enter any number outside the range 0-200, have you tried it? please tell me what it's doing that's not compliant with your requirement – Scaramouche Apr 06 '20 at 18:39
@AnkitPandey check the edit. I think that's the best that can be done using events, if you want to prevent for even the `-` sign to be written then i think your only choice is to use regex (personally think it's overkill) – Scaramouche Apr 06 '20 at 18:55
Thanks alot. But why these hacks it's really strange and annoying. – Ankit Pandey Apr 06 '20 at 19:06
@AnkitPandey which hacks? here, [this](https://stackoverflow.com/a/31706796/4770813) might be useful to understand how numeric `input`s work and what they accept as values – Scaramouche Apr 06 '20 at 19:09

For ng-keyup unable to do event.preventDefault() and ng-keypress lagging behind a value for input type number in angular.js

1 Answers1