Html 如何将输入字段限制为最多输入100

我使用了最小、最大属性

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

上面的输入字段在鼠标悬停时显示错误。i、 e.，“请选择不超过100的值。”

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

---

我们不允许用户输入除100以外的两位数以上的值。

制作一个JavaScript代码来进行限制，因此当用户输入一个低于1的数字时，它将被替换为1。所有超过100的数字都将被100所取代

代码：

功能限制值（输入）{
如果（输入值<1）{
input.value=1；
}
如果（输入值>100）{
input.value=100；
}
}

---

如果您想在用户键入时使用此功能，只需将

onchange

更改为

oninput

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

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

$（文档）.ready（函数（）{
$（“#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（）；
});
});

我创建了一个指令来限制输入字段中的字符数。这也与像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;
        });
      }
    }
  }]);

用法：

---

要使我的指令起作用，需要使用

ng model

属性

调用一个函数悬停以显示错误，并在上方隐藏错误可能重复的请共享示例代码段代码，不适用于me@VeeraBhadra：我已经更新了我的示例。请检查一下。

.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;
        });
      }
    }
  }]);