限制输入字段只接受带范围的数字

Question

I want to create a input field in html where can limit the users to enter a number only between the range -40 to 130. The user can also enter decimal values For example : -40.2 (valid) -40.23 (not Valid) 130(valid) 130.1 (not Valid)

So the input should be able to take in any number between the range and should only accept decimal place fixed to 1.

Any suggestions or help is highly appreciated

thanks in Advance

Answer 1

You can use an input of type number with the attributes min max and step like this :

<form action="">
    <input type="number" min="-40" max="130" step="0.1" id="input"/>
    <button type="submit">Ok</button>
</form>

I provide a JSFiddle here. When you try to submit the form, the html5 validation displays a message if the number is out of the bounds or with more than one decimals.

JSFiddle

Answer 2

as Xartok told You can use an input of type number with the attributes min max and step but if the user is keying in the input its a bit hard from my experience. what i did was like this.

• onkeypress is used to allow users to only key in integers with decimal only.

• ng-blur is used to trigger changeDecimal function to do the validation/rounding up to fixed decimal places

   <form> <input type="text" id="input" onkeypress="return event.charCode >= 45 && event.charCode <= 57 && event.charCode!=47" ng-model="input1"ng-blur="changeDecimal()" /> <button type="submit">Ok</button> </form> 

and from the controller side what i did was this :

1st i parse the input to float and fix it to 1 decimal place. then i made a condition to check the range if it is within the range, the input is replaced with the new value else an alert is returned. in the else section i did a small check if the input is blank or not a number then replace with a default value (to avoid a loop of alert if the input is left blank)

app.controller('MainCtrl', function($scope) {

  $scope.changeDecimal = function (){
    temp = parseFloat($scope.input1).toFixed(1);
    if (temp > -40 && temp < 130 && !isNaN(temp)){
      $scope.input1= temp;
    }else{
      alert("value out of range ");
      if (isNaN (temp) || temp == null || !angular.isDefined(temp)){
        $scope.input1=0;
      }
    }
  }

});

If you plan to use the input type as number what you can do is set a condition for you submit button ( ng-disable ). the button is disabled until the condition is met.

here is the sample from Plunker