在键上验证正在工作，但在按键时它不起作用

on keyup validation is working but on keypress its not working

本文关键字：不起作用 工作 验证      更新时间：2023-09-26

输入框需要以下验证：

1） 长度

输入框最多应包含 3 个整数长度值（不允许使用小数）

2）

高度输入框应取3个整数和小数最多2位 它第一次工作正常，但是在单击+按钮（打开新行1附近）后，相同的输入字段正在打开，但现在： 在新框中，即使我对输入框使用相同的类，验证也不起作用， 即，新添加的输入框采用任意数量的数字和字符。

在 keyup 功能中它正在工作，但是如果用户按下任何键，它对新打开的行不起作用，那么如何在这两种情况下使其在按键上工作; 在 keyup 验证工作，但在按键时它不起作用

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
      });
      $(".form-control").on("keyup", function (e) {
        var $field = $(this),
            val=this.value,
            $thisIndex=parseInt($field.data("idx"),10); // retrieve the index
//        window.console && console.log($field.is(":invalid"));
          //  $field.is(":invalid") is for Safari, it must be the last to not error in IE8
        if (this.validity && this.validity.badInput || isNaN(val) || $field.is(":invalid") ) {
            this.value = inputQuantity[$thisIndex];
            return;
        } 
        if (val.length > Number($field.attr("maxlength"))) {
          val=val.slice(0, 5);
          $field.val(val);
        }
        inputQuantity[$thisIndex]=val;
      });      
    });
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>

要为所有字段触发 keyup 事件，我们需要稍微更改侦听器的定义，选择器 .form-control 应在on()内定义为子选择器，document定义为主选择器：

$(document).on("keyup",".form-control", function (e) {
// listener code
});

按键事件的行为与键启动事件的行为不同。按下每个键都会触发按键，就在字段中设置值之前。而 keyup 事件针对释放的每个键触发，并且仅在字段中设置值之后触发。因此，相同的方法不适用于按键。

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) {
            if (e.charCode!=0){
            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();
            }
           }
        });
        $(document).on("keyup",".form-control", function (e) {
            var $field = $(this),
                val=this.value,
                $thisIndex=parseInt($field.data("idx"),10); 
            if (parseInt(val,10) > parseInt(this.max, 10) ) {
                this.value = inputQuantity[$thisIndex];
                return;
            } 
            if (val.length > Number($field.attr("maxlength"))) {
                val=val.slice(0, 5);
                $field.val(val);
            }
            inputQuantity[$thisIndex]=val;
        });      
    });
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="text" 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="text" 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>

相关文章：