Этот вопрос был задан для отрицательных чисел, но все ответы по-прежнему имеют возможность добавить 0
. Заказывая товар в моем магазине и устанавливая количество на 0
вы можете разместить заказ без затрат, поэтому минимальное количество должно быть 1
.
Я подумал, что, возможно, я смогу отключить ввод 0
с помощью javascript (это работает для отрицательных чисел, предотвращая ввод тире), но что, если кто-то наберет 10
? Поэтому мне нужно другое решение.
Как я могу это сделать?
Мое поле ввода:
<input name="quantity" id="'.$cart['productid'].$cart['kuubkosten'].'" value="'.$cart['quantity'].'" type="number" min="1">
Всего 4 ответа
Запрет ввода пользователем 0 или отрицательный
Приведенный ниже код не позволит пользователю ввести 0 или отрицательные значения
let qty = document.querySelector("input[name='quantity']"); qty.addEventListener("change", function (event) { if (this.value < 1) this.value = 1; // minimum is 1 else this.value = Math.floor(this.value); // only integers allowed })
<input name="quantity" id="dummyId" value="0" type="number" min="1">
Если вы не хотите беспокоиться о слишком большом количестве javascript, следующий способ является более кратким:
<input name="quantity" id="dummyId" value="0" type="number" min="1" onchange="this.value = Math.floor(Math.max(this.value,1))">
Вы можете удалить бит Math.floor()
если не хотите округлять до целых чисел.
Используйте следующую замену, чтобы авторизовать только положительное целое число больше 1:
<input type="number" onchange="this.value = Math.max(Math.ceil(Math.abs(this.value || 1)) || 1);">
Но значение все еще может быть отредактировано / преобразовано с помощью javascript, не забудьте реализовать реальный контроль над вашим бэкэндом
Йо может сделать что-то вроде этого, у меня тоже когда-то возникла такая проблема, тогда я придумал это решение
Дайте имя class
в поле ввода и type=tel
он будет работать и с number
но это занимает minus
поэтому мне пришлось использовать tel
<input name="quantity" id="'.$cart['productid'].$cart['kuubkosten'].'" value="'.$cart['quantity'].'" type="class="test" >
Чем сделать, как показано ниже
(function($) {
$.fn.inputFilter = function(inputFilter) {
return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
}
});
};
}(jQuery));
$(".test").inputFilter(function(value) {
return /^d*[.]?d*$/.test(value);
});
Функция проверит значения, введенные в поле ввода, затем в фильтре поля ввода вы можете использовать RegExp
чтобы разрешить требуемый тип ввода.
Рабочий фрагмент
(function($) { $.fn.inputFilter = function(inputFilter) { return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() { if (inputFilter(this.value)) { this.oldValue = this.value; this.oldSelectionStart = this.selectionStart; this.oldSelectionEnd = this.selectionEnd; } else if (this.hasOwnProperty("oldValue")) { this.value = this.oldValue; this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd); } }); }; }(jQuery)); $(".test").inputFilter(function(value) { return /^d*[.]?d*$/.test(value); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input name="quantity" id="'.$cart['productid'].$cart['kuubkosten'].'" value="'.$cart['quantity'].'" type="tel" class="test">
Вы можете передать функцию onChange на вход:
const onChange = (event) => {
if(event.target.value <= 0) {
event.preventDefault();
}
}