Как предотвратить ввод нулевого или отрицательного числа в поле ввода числа

Этот вопрос был задан для отрицательных чисел, но все ответы по-прежнему имеют возможность добавить 0 . Заказывая товар в моем магазине и устанавливая количество на 0 вы можете разместить заказ без затрат, поэтому минимальное количество должно быть 1 .

Я подумал, что, возможно, я смогу отключить ввод 0 с помощью javascript (это работает для отрицательных чисел, предотвращая ввод тире), но что, если кто-то наберет 10 ? Поэтому мне нужно другое решение.

Как я могу это сделать?

Мое поле ввода:

<input name="quantity" id="'.$cart['productid'].$cart['kuubkosten'].'" value="'.$cart['quantity'].'" type="number" min="1">

javascript jquery html input

Всего 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();
   }
}