输入框不采用浮点值答案

【问题标题】：input box is not taking float value输入框不采用浮点值
【发布时间】：2016-04-28 15:01:24
【问题描述】：

块引用在高度字段的情况下，它取 3 个整数值，它是正确的，但之后它必须取 2 个浮点值，例如 555.34 即使我正在使用 step="0.01" 和 max="3"，但是在按键上它在 3 位数字后不采用任何浮点值块引用

var app = angular.module('Calc', []);
 var inputQuantity = [];
    $(function() {
      $(".form-control").each(function(i) {
        inputQuantity[i]=this.defaultValue;
         $(this).data("idx",i); // save this field's index to access later
      });
      $(document).on("keypress",".form-control", function (e) {
        var $field = $(this),
            val=this.value+''+String.fromCharCode(e.charCode),pattern;
        if(this.step==0.00)
          pattern=/[^0-9]/
          else
          pattern=/[^0-9.]/
        if ( val>parseInt(this.max,10)||pattern.test(val)|| (val.match(/\./) && (val.match(/\./g).length>1 || val.replace(/\d+\./,'').length>2))) {
               e.preventDefault();
        }
      });      
    });
app.controller('Calc_Ctrl', function ($scope, $http) {
     $scope.choices = [{id : 'choice1', l2 : 0, b2 : 0}];
     $scope.areas = [{id : 'choice2', total : 0}];

     $scope.addNewChoice = function () {
          var newItemNo = $scope.choices.length + 1;
          $scope.choices.push({
               'id' : 'choice' + newItemNo, l2 : 0, b2 : 0
          });
     };
     $scope.removeChoice = function () {
          var lastItem = $scope.choices.length - 1;
          if (lastItem !== 0) {
               $scope.choices.splice(lastItem);
          }
     };
});

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="newscript.js"></script>

<body>
  <div ng-app="Calc" ng-controller="Calc_Ctrl">
               <div  data-ng-repeat="choice in choices" class="col-md-12 col-sm-12 col-xs-12 bottom-line no-gap">
                              <h6>Open New Row {{$index + 1}} 
                                   <button type="button" class="btn btn-default pull-right btn-right-gap  btn-red" aria-label="Left Align"  ng-click="addNewChoice()" style="margin-top: -5px;" id="plus_icon">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                   </button>

                              </h6> 
                              <div class="row walls top-gap">

                                   <div class="form-group col-md-3 col-sm-3 col-xs-12">
                                        <label for="length">Length :</label>
                                        <input type="number" class="form-control text-red bold" id="length"  ng-model="choice.l2"  min="0" max="999" maxlength="6" step="0.00">
                                   </div>
                                   <div class="form-group col-md-3 col-sm-3 col-xs-12">
                                        <label for="height">Height :</label>
                                        <input type="number" class="form-control text-red bold" id="height"   ng-model="choice.b2"  min="0" max="999" maxlength="6" step="0.01">
                                   </div>
                                 
                                   <button type="button" class="btn btn-default pull-right btn-red" aria-label="Left Align"  ng-click="removeChoice()" id="minus_icon">
                                   </button>
                              </div>

                         </div>
  </div>
</body>

</html>

【问题讨论】：

在这里工作正常link
@SatejS 它不起作用，它取 n 个整数和字符，这是错误的，它必须只取 3 个整数和 2 个浮点值，例如 123.33
抱歉，正在处理中。
你的问题在这里if ( val>parseInt(this.max,10)||pattern.test(val)|| (val.match(/\./) && (val.match(/\./g).length>1 || val.replace(/\d+\./,'').length>2)))
你的函数很奇怪。你接受一个数字，但 val 是一个字符串？为什么？

标签： jquery html angularjs

【解决方案1】：

所以我已经开始并真正简化了这段代码。我了解到您担心产生类似123.33 的格式的值。

我在输入类型中使用了ng-pattern，以确保输入与所需的模式匹配。

正则表达式

[0-9]{3}[.][0-9]{2}

HTML

<input type="number" class="form-control text-red bold" id="length"  ng-model="choice.l2" ng-pattern="/[0-9]{3}[.][0-9]{2}/"  min="0" max="999" maxlength="6" step="0.00">

只有当您的输入符合所需的正则表达式时，长度和高度字段才有效。

这是demo

【讨论】：

很抱歉，但它再次占用了 n 个数字，您在 pulnker 中发布了它
是的，它将采用n 的位数，但该字段在匹配所需的模式之前无效。这正是 Angular 的优点，您可以根据模式验证输入.如果它无效，它不会为 ng-model 赋值。
对于开发者视图来说很好，但是作为用户视图它是无效的，因为不幸的是用户不知道角度的美丽