我怎樣才能限制輸入字段以高達100

Question

我用分鐘進入，最大屬性

<input min="1" max="100" type="number"> 

以上輸入字段上顯示在小鼠錯誤。即「請選擇不超過100的值」。

我想限制用戶輸入1到100，不應該顯示錯誤消息。

我們不應該允許用戶超過100

Answer 1

進入其他兩個以上的數字值做一個JavaScript代碼進行限制，所以當用戶進入下面的號碼1將與1而被替換超過100的所有號碼將通過100

代碼來代替：

<input min="1" max="100" type="number" onchange="restrictValue(this)"> 
<script> 
function restrictValue(input) { 
    if (input.value < 1) { 
     input.value = 1; 
    } 
    if (input.value > 100) { 
     input.value = 100; 
    } 
} 
</script> 

如果您希望這當用戶鍵入的工作，只是改變onchange到oninput。

Answer 2

您可以使用按鍵事件來創建您的限制，因此當用戶鍵入您不想要的內容時，該值將自動更改。

<input min="1" max="100" type="number" id="myinput"> 

<script> 
    $(document).ready(function(){ 
     $("#myinput").on('keypress keyup', function(){ 

      var max = parseInt($(this).attr('max')); 
      var min = parseInt($(this).attr('min')); 
      var val = $(this).val(); 

      (val < 1) ? $(this).val(min) : $(this).val(); 
      (val > 100) ? $(this).val(max) : $(this).val(); 

     }); 
    }); 
</script> 

Answer 3

我創建了一個指令來限制輸入字段中的字符數。這也與IE11等老式瀏覽器兼容。

.directive("limitTo", [function() { 
return { 
    restrict: "A", 
    require: "ngModel", 
    link: function(scope, elem, attrs, ctrl) { 
     var limit = parseInt(attrs.limitTo); 
     ctrl.$parsers.push(function (value) { 
      if (value.length > limit){ 
       value = value.substr(0, limit); 
       ctrl.$setViewValue(value); 
       ctrl.$render(); 
      } 
      return value; 
     }); 
     } 
    } 
    }]); 

用法：<input type="text" ng-model="test" limit-to="100" />。

對於我的指令工作，ng-model屬性是必需的。 Example