Question

该问题被要求提供负数，但所有答案仍然可以添加0。在我的商店订购产品并将数量设置为0时，您可以免费下订单，因此最小数量应为1。

我以为我可以禁止使用JavaScript输入0（这可以通过防止输入破折号来处理负数），但是如果有人输入10怎么办？所以我需要另一个解决方案。

我该怎么做？

我的输入字段：

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

Answer 1

防止用户输入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()位。

Answer 2

使用以下onchange授权仅大于1的正整数：

<input type="number"  onchange="this.value = Math.max(Math.ceil(Math.abs(this.value || 1)) || 1);">

但是仍然可以使用javascript编辑/转换值，不要忘了在后端实现真正的控制

Answer 3

Yo可以做这样的事情，有一天我也遇到了这样的问题，然后我想出了这个解决方案

在您的输入字段中输入一个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">

Answer 4

您可以将onChange函数传递给输入：

const onChange = (event) => {
   if(event.target.value <= 0) {
       event.preventDefault();
   }
}

如何防止在数字输入字段中键入零或负数

4 个答案: