Javascript 如何防止用户在angular中查看的输入字段中输入错误？

我在网格上有一个带分页的监视输入字段。大约28页的X

我希望用户能够更改该输入，但我也希望防止错误输入

---

我的支票>=1或我为您写了一个例子：

var min = 1;
var max = 28;
$('.page').live('keydown', function (e){      
      var currentVal = $(this).val();
      //enter,tab, shift
      if(e.which == 37 || e.which == 39 || e.which == 9 || e.which == 8) {
          return;
      // key up
      } else if(e.which == 38){
          if(currentVal < max){
             currentVal++;
          }
          $(this).val(currentVal);
      //key down    
      } else if( e.which == 40) {
        if(currentVal > min){
             currentVal--;
          }
          $(this).val(currentVal);
      //only numbers    
      } else if(e.which >= 48 && e.which <= 57){
        var val = e.which - 48;
        if(e.target.selectionEnd == e.target.selectionStart) {
          val = currentVal.insert(e.target.selectionEnd, val);
        } else {
          val = currentVal.replace(currentVal.substr(getSelectionStart(e.target),getSelectionEnd(e.target)),val);
        }
        if(min<=val && val <= max) {
          $(this).val(val);
        }
      }
      e.preventDefault();
});

// utility functions
//get the start index of the user selection
function getSelectionStart(o) {
    if ( typeof o.selectionStart != 'undefined' )
      return o.selectionStart;

    // IE And FF Support
    o.focus();
    var range = o.createTextRange();
    range.moveToBookmark(document.selection.createRange().getBookmark());
    range.moveEnd('character', o.value.length);
    return o.value.length - range.text.length;
};
//get the end index of the user selection
function getSelectionEnd(o) {
    if ( typeof o.selectionEnd != 'undefined' )
      return o.selectionEnd;

    // IE And FF Support
    o.focus();
    var range = o.createTextRange();
    range.moveToBookmark(document.selection.createRange().getBookmark());
    range.moveStart('character', - o.value.length);
    return range.text.length;
};
/*
* Insert Text at a index
*/
String.prototype.insert = function (index, string) {
  if (index > 0)
    return this.substring(0, index) + string + this.substring(index, this.length);
  else
    return string + this;
};

var最小值=1；
var max=28；
$（'.page'）.live（'keydown'，函数（e）{
var currentVal=$（this.val（）；
//输入、制表符、shift
如果（e.which==37 | e.which==39 | e.which==9 | e.which==8）{
返回；
//钥匙
}否则如果（e.which==38）{
如果（当前值<最大值）{
currentVal++；
}
$（this）.val（currentVal）；
//按下键
}否则如果（e.which==40）{
如果（当前值>最小值）{
当前值--；
}
$（this）.val（currentVal）；
//只有数字
}如果（e.which>=48&&e.which我给你写了一个例子：

var min = 1;
var max = 28;
$('.page').live('keydown', function (e){      
      var currentVal = $(this).val();
      //enter,tab, shift
      if(e.which == 37 || e.which == 39 || e.which == 9 || e.which == 8) {
          return;
      // key up
      } else if(e.which == 38){
          if(currentVal < max){
             currentVal++;
          }
          $(this).val(currentVal);
      //key down    
      } else if( e.which == 40) {
        if(currentVal > min){
             currentVal--;
          }
          $(this).val(currentVal);
      //only numbers    
      } else if(e.which >= 48 && e.which <= 57){
        var val = e.which - 48;
        if(e.target.selectionEnd == e.target.selectionStart) {
          val = currentVal.insert(e.target.selectionEnd, val);
        } else {
          val = currentVal.replace(currentVal.substr(getSelectionStart(e.target),getSelectionEnd(e.target)),val);
        }
        if(min<=val && val <= max) {
          $(this).val(val);
        }
      }
      e.preventDefault();
});

// utility functions
//get the start index of the user selection
function getSelectionStart(o) {
    if ( typeof o.selectionStart != 'undefined' )
      return o.selectionStart;

    // IE And FF Support
    o.focus();
    var range = o.createTextRange();
    range.moveToBookmark(document.selection.createRange().getBookmark());
    range.moveEnd('character', o.value.length);
    return o.value.length - range.text.length;
};
//get the end index of the user selection
function getSelectionEnd(o) {
    if ( typeof o.selectionEnd != 'undefined' )
      return o.selectionEnd;

    // IE And FF Support
    o.focus();
    var range = o.createTextRange();
    range.moveToBookmark(document.selection.createRange().getBookmark());
    range.moveStart('character', - o.value.length);
    return range.text.length;
};
/*
* Insert Text at a index
*/
String.prototype.insert = function (index, string) {
  if (index > 0)
    return this.substring(0, index) + string + this.substring(index, this.length);
  else
    return string + this;
};

var最小值=1；
var max=28；
$（'.page'）.live（'keydown'，函数（e）{
var currentVal=$（this.val（）；
//输入、制表符、shift
如果（e.which==37 | e.which==39 | e.which==9 | e.which==8）{
返回；
//钥匙
}否则如果（e.which==38）{
如果（当前值<最大值）{
currentVal++；
}
$（this）.val（currentVal）；
//按下键
}否则如果（e.which==40）{
如果（当前值>最小值）{
当前值--；
}
$（this）.val（currentVal）；
//只有数字
}否则如果（e.which>=48&&e.which您可以使用
和您自己的指令的组合，该指令具有用于
模糊事件的解析器和侦听器。这样，您的手表将仅在页码为有效页时执行，或者在输入无效时使用
null
执行一次，但用户可以在模糊事件之前输入任何内容事件激发。类似以下内容：

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
    <script>
    angular.module('myApp', []).controller('Ctrl', function($scope) {
        $scope.pageNumber = 1;
    })
    .directive('myPagenumber', function() {
        return {
            require: 'ngModel',
            link: function($scope, elem, attrs, ctrl) {
                $scope.$watch(attrs.ngModel, function(val) {
                    console.log('ng-model value: ' + val);
                });

                var parsePage = function(val) {
                    var num = parseInt(val, 10);
                    if (isNaN(num)) {
                        return null;
                    } else if (num > 28 || num < 1) {
                        return 1;
                    } else {
                        return num;
                    }
                }

                ctrl.$parsers.push(function(val) {
                    return parsePage(val);
                });

                elem.bind('blur', function() {
                    var page = parsePage(elem.val());
                    if (page === null) 
                        page = 1;

                    $scope.$apply(function() {
                        ctrl.$setViewValue(page);
                        ctrl.$render();
                    });
                });
            }
        };
    });
    </script>
</head>
<body ng-controller="Ctrl">
    <input type="number" ng-model="pageNumber" my-pagenumber>
</body>
</html>


角度.module（'myApp'，[]）.controller（'Ctrl'，function（$scope）{
$scope.pageNumber=1；
})
.directive（'myPagenumber'，function（）{
返回{
要求：'ngModel'，
链接：函数（$scope、elem、attrs、ctrl）{
$scope.$watch（attrs.ngModel，function（val））{
console.log（'ng-model值：'+val）；
});
var parsePage=函数（val）{
var num=parseInt（val，10）；
if（isNaN（num））{
返回null；
}否则如果（数值>28 | |数值<1）{
返回1；
}否则{
返回num；
}
}
ctrl.$parsers.push（函数（val）{
返回页面（val）；
});
元素绑定（'blur'，函数（）{
var page=parsePage（elem.val（））；
如果（第===null页）
page=1；
$scope.$apply（函数（）{
ctrl.$setViewValue（第页）；
ctrl.$render（）；
});
});
}
};
});
您可以使用
和您自己的指令的组合，该指令有一个解析器和一个侦听器用于
blur
事件。这样，您的手表只会在页码为有效页时执行，或者在输入无效时使用
null
执行一次，但用户可以输入任何内容，直到触发blur事件。有时他这样说：

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
    <script>
    angular.module('myApp', []).controller('Ctrl', function($scope) {
        $scope.pageNumber = 1;
    })
    .directive('myPagenumber', function() {
        return {
            require: 'ngModel',
            link: function($scope, elem, attrs, ctrl) {
                $scope.$watch(attrs.ngModel, function(val) {
                    console.log('ng-model value: ' + val);
                });

                var parsePage = function(val) {
                    var num = parseInt(val, 10);
                    if (isNaN(num)) {
                        return null;
                    } else if (num > 28 || num < 1) {
                        return 1;
                    } else {
                        return num;
                    }
                }

                ctrl.$parsers.push(function(val) {
                    return parsePage(val);
                });

                elem.bind('blur', function() {
                    var page = parsePage(elem.val());
                    if (page === null) 
                        page = 1;

                    $scope.$apply(function() {
                        ctrl.$setViewValue(page);
                        ctrl.$render();
                    });
                });
            }
        };
    });
    </script>
</head>
<body ng-controller="Ctrl">
    <input type="number" ng-model="pageNumber" my-pagenumber>
</body>
</html>


角度.module（'myApp'，[]）.controller（'Ctrl'，function（$scope）{
$scope.pageNumber=1；
})
.directive（'myPagenumber'，function（）{
返回{
要求：'ngModel'，
链接：函数（$scope、elem、attrs、ctrl）{
$scope.$watch（attrs.ngModel，function（val））{
console.log（'ng-model值：'+val）；
});
var parsePage=函数（val）{
var num=parseInt（val，10）；
if（isNaN（num））{
返回null；
}否则如果（数值>28 | |数值<1）{
返回1；
}否则{
返回num；
}
}
ctrl.$parsers.push（函数（val）{
返回页面（val）；
});
元素绑定（'blur'，函数（）{
var page=parsePage（elem.val（））；
如果（第===null页）
page=1；
$scope.$apply（函数（）{
ctrl.$setViewValue（第页）；
ctrl.$render（）；
});
});
}
};
});
谢谢，我本来希望有更干净一点的东西，但我想这是不存在的。似乎Angular在这方面会有更多的烘焙功能，因为这似乎是一个常见的用例。试试这个：
。我现在在手机上，所以无法测试它，但它似乎应该可以工作。谢谢，我希望有一个更干净的东西ner，但我想这是不存在的。似乎Angular会提供更多的烘焙功能，因为这似乎是一个常见的用例。试试这个：
。我在手机上，所以无法测试它，但它似乎应该可以工作。