У меня есть поле ввода type=number, и я установил для него значения min и max:
<input type="number" min="0" max="23" value="14">
Когда я изменяю время в визуализированном пользовательском интерфейсе, используя маленькие стрелки в правой части поля ввода, все работает правильно - я не могу идти выше 23 или ниже 0. Однако, когда я вводить цифры вручную ( используя клавиатуру), то ни одно из ограничений не имеет эффекта.
Есть ли способ запретить кому-либо вводить нужное количество?
В 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" />Возможно, вместо того, чтобы использовать тип "число", вы можете использовать тип "диапазон", который ограничивал бы пользователя от ввода чисел, поскольку он использует панель слайдов, и если вы хотите настроить его для отображения текущего номера, просто используйте JavaScript
В некоторых случаях min и max могут использоваться pattern. Он корректно работает с required.
$(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!
Один 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="">$(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));
}
});
Используйте этот метод диапазона вместо числового метода.
$(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"/>Если вы все еще ищете ответ, вы можете использовать тип ввода = "номер".
min max работает, если он установлен в следующем порядке:
1-имя
2-MaxLength
3 размера
4-минутная
5-макс
просто скопируйте его
<input name="X" maxlength="3" size="2" min="1" max="100" type="number" />
когда вы вводите цифры/буквы вручную (используя клавиатуру), и отправляете небольшое сообщение, появляющееся в случае букв "пожалуйста, введите число" в случае номера из диапазона ", пожалуйста, выберите значение, которое не более/меньше, чем.."