Введенный номер мин. И макс не работает должным образом

Ответ 1

В HTML5 max и min вы можете ограничить ввод значений только цифрами. Но вам нужно использовать JavaScript или jQuery для такого рода изменений. У меня есть идея использовать data- и сохранить старое значение:

$(function () {
  $("input").keydown(function () {
    // Save old value.
    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))
    $(this).data("old", $(this).val());
  });
  $("input").keyup(function () {
    // Check correct, else revert back to old value.
    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))
      ;
    else
      $(this).val($(this).data("old"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" min="0" max="23" value="14" />

Ответ 2

Возможно, вместо того, чтобы использовать тип "число", вы можете использовать тип "диапазон", который ограничивал бы пользователя от ввода чисел, поскольку он использует панель слайдов, и если вы хотите настроить его для отображения текущего номера, просто используйте JavaScript

Ответ 3

В некоторых случаях min и max могут использоваться pattern. Он корректно работает с required.

Ответ 4

$(document).ready(function(){
    $('input[type="number"]').on('keyup',function(){
        v = parseInt($(this).val());
        min = parseInt($(this).attr('min'));
        max = parseInt($(this).attr('max'));

        /*if (v < min){
            $(this).val(min);
        } else */if (v > max){
            $(this).val(max);
        }
    })
})

Вот мой вклад. Обратите внимание, что v <min закомментировано, потому что я использую Bootstrap, который любезно указывает пользователю, что диапазон находится за пределами 1-100, но странно не выделяет> max!

Ответ 5

Один event listener, data-.

Вы можете просто предотвратить это, используя следующий скрипт:

$(document).on('keyup', 'input[name=quantity]', function () {
    var _this = $(this);
    var min = parseInt(_this.attr('min')) || 1; // if min attribute is not defined, 1 is default
    var max = parseInt(_this.attr('max')) || 100; // if max attribute is not defined, 100 is default
    var val = parseInt(_this.val()) || (min - 1); // if input char is not a number the value will be (min - 1) so first condition will be true
    if(val < min)
        _this.val( min );
    if(val > max)
        _this.val( max );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="number" class="form-control" name="quantity" max="250" min="1" value="">

Ответ 6

$(document).on('keyup', 'input[type=number][min],input[type=number][max]', function () {
    var _this = $(this);
    if (_this.val() === "-")
        return;

    var val = parseFloat(_this.val());

    if (_this.attr("min") !== undefined && _this.attr("min") !== "") {
        var min = parseFloat(_this.attr('min'));

        if (val < min)
            _this.val(min);
    }
    if (_this.attr("max") !== undefined && _this.attr("max") !== "") {
        var max = parseFloat(_this.attr('max'));

        if (val > max)
            _this.val(max);
    }
});
$(document).on('change', 'input[type=number][step]', function () {
    var _this = $(this);

    var val = parseFloat(_this.val());

    if (_this.attr("step") !== undefined && _this.attr("step") !== "") {
        var step = parseFloat(_this.attr('step'));

        if ((val % step) != 0)
            _this.val(val - (val % step));
    }
});

Ответ 7

Используйте этот метод диапазона вместо числового метода.

$(function () {
  $("#input").change(function () {
    // Save old value.
    $("#limit").val($("#input").val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="limit" name="limit" value="14" readonly><br>
<input type="range" id="input" name="input" min="0" max="23" value="14"/>

Ответ 8

Если вы все еще ищете ответ, вы можете использовать тип ввода = "номер".
min max работает, если он установлен в следующем порядке:
1-имя
2-MaxLength
3 размера
4-минутная
5-макс
просто скопируйте его

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />

когда вы вводите цифры/буквы вручную (используя клавиатуру), и отправляете небольшое сообщение, появляющееся в случае букв "пожалуйста, введите число" в случае номера из диапазона ", пожалуйста, выберите значение, которое не более/меньше, чем.."