如何防止角度上的觀看輸入字段上的用戶輸入錯誤？

我有一個網格與分頁觀看輸入字段。像28頁的X。如何防止角度上的觀看輸入字段上的用戶輸入錯誤？

我希望用戶能夠更改該輸入，但我也想防止錯誤輸入。

我的支票> = 1或< =最大頁數（本例中爲28）。輸入的默認值爲1.

我通過比較新值與這些約束來完成此操作，如果失敗，則還原爲舊值。當有人想輸入20讓我們說，問題來了。這要求他們刪除1和類型20.一旦他們刪除1，它就會失敗約束，並返回到1，從而不可能輸入20.

是否有無論如何不將它從$看？

2013-03-07 user1500053

你可以使用的<input type="number">組合和你自己的指令，它有一個解析器併爲blur事件的監聽器。這樣，只有在頁碼是有效頁面時纔會執行手錶，或者在輸入無效時用於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>

來源

2013-03-07 08:51:02

謝謝，我希望有一點更清潔，但我想這不存在。看起來像Angular的功能會有更多的變化，因爲它看起來像一個常見的用例。 – user1500053 2013-03-08 17:31:02

試試這個：''。我在我的手機上，所以我無法測試它，但它似乎應該起作用。 – 2013-03-08 18:17:59

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

動畫例如：http://jsfiddle.net/PVxqe/1/

來源

2013-03-07 06:32:37

如何防止角度上的觀看輸入字段上的用戶輸入錯誤？

回答

相關問題