Question

我使用了min，max属性

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

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

我想限制用户输入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

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

3 个答案: