如何限制输入字段最多输入 100答案

【问题标题】：How can I restrict input field to enter upto 100如何限制输入字段最多输入 100
【发布时间】：2017-03-20 15:21:55
【问题描述】：

我使用了最小、最大属性

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

鼠标悬停时，上方输入字段显示错误。即“请选择不超过 100 的值。”

我想限制用户输入 1 到 100 并且不应该显示错误消息。

我们不应允许用户输入超过 100 以外的两位数。

【问题讨论】：

调用函数hover来显示错误并在over out hide错误
Restrict user to put value in range in html input (type = number)的可能重复

标签： html angularjs

【解决方案1】：

您可以使用按键事件来创建您的限制，因此当用户键入您不想要的内容时，该值会自动更改。

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

【讨论】：

【解决方案2】：

我创建了一个指令来限制输入字段中的字符数。这也兼容 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

【讨论】：

请分享示例 sn-p 代码，不适合我
@VeeraBhadra：我已经更新了我的示例。请检查一下。

【解决方案3】：

制作一个限制条件的 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。

【讨论】：