Question

我想在html中创建一个输入字段，可以限制用户输入的数字仅在-40到130之间。用户还可以输入小数值例如： -40.2（有效） -40.23（无效） 130（有效） 130.1（无效）

因此输入应该能够接受范围之间的任何数字，并且只能接受固定为1的小数位。

非常感谢任何建议或帮助

先谢谢

Answer 1

您可以使用类型为number的输入，其属性为min max，步骤如下：

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

我在这里提供了一个JSFiddle。当您尝试提交表单时，如果数字超出范围或者包含多个小数，则html5验证会显示一条消息。

JSFiddle

Answer 2

正如Xartok所说，您可以使用类型编号的输入，其属性为min max和step但是如果用户输入输入，则根据我的经验有点困难。我所做的就是这样。

onkeypress用于允许用户仅键入仅带小数的整数。

ng-blur用于触发changeDecimal函数进行验证/舍入到固定小数位

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

从控制器方面我做的是：

1我将输入解析为float并将其固定为1位小数。然后我做了一个条件来检查范围是否在范围内，输入被新值替换，否则返回一个警报。在else部分，我做了一个小的检查，如果输入是空白的或不是数字，然后用默认值替换（如果输入留空，则避免一个警报循环）

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

});

如果您打算将输入类型用作数字，那么您可以为提交按钮（ng-disable）设置条件。按钮被禁用，直到满足条件。

这是来自 Plunker

的样本

将输入字段限制为仅采用带范围的数字

2 个答案: