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

此问题的答案为负数，但所有答案仍可以添加

0

。在我的店铺订购产品并将数量设置为

0

时，您可以免费订购，因此最小数量应为

1

我想也许我可以禁止使用javascript键入

0

（这可以通过防止键入破折号来处理负数），但是如果有人键入

10

？所以我需要另一个解决方案

我该怎么做

我的输入字段：

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

---

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

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

const onChange=（事件）=>{
如果（event.target.value）阻止用户输入0或负值

以下代码将阻止用户输入0或负值


let qty=document.querySelector（“输入[name='quantity']”）；
addEventListener数量（“更改”，函数（事件）{
如果（this.value<1）this.value=1；//最小值为1
else this.value=Math.floor（this.value）；//只允许整数
})
使用以下onchange仅授权大于等于1的正整数：

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



但是值仍然可以用javascript编辑/转换，别忘了在你的后端实现真正的控制
你可以这样做，我也有一天遇到这种问题，然后我想出了这个解决方案

为您的输入字段指定一个
class
名称，并且
type=tel
它将与
number
一起工作，但它需要
减去
，因此我不得不使用
tel

<input name="quantity" id="'.$cart['productid'].$cart['kuubkosten'].'" value="'.$cart['quantity'].'" type="class="test" >

函数将检查输入字段内输入的值，而不是在输入字段过滤器上，您可以使用
RegExp
来允许所需的输入类型

工作片段


（函数（$）{
$.fn.inputFilter=函数（inputFilter）{
返回此参数。on（“输入键向下键向上键向下键鼠标向下键向下鼠标右键选择上下文菜单下拉”，函数（）{
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（函数（值）{
返回/^\d*[.]？\d*$/.test（值）；
})；

您已经有了
min=“1”
因此，如果输入了
0
，表单将不会提交。您不需要更多的客户端，但需要检查服务器端的值是否有效。可能是@NiettheDarkAbsol的重复项，它是以0或负数提交的，可能是因为我使用的是ajax。@twan因为您没有在Submi上使用事件
t
@twan一旦我的答案能帮你解决问题，就检查它。我在
一次更改中放置了上述代码，但它不起作用。此代码正在重新发明
min=“1”
OP已经具有的属性。问题不完全是人们在访问页面时没有任何东西，而是人们能够编辑低于1的数量。我仍然可以在该输入字段中使用上述代码编写
0
或
-10
，并更新价格，从而导致
0欧元、
甚至是负价格。谢谢他的工作是第一次，但在我更新产品摘要并再次更新之后，代码不再应用（我使用ajax获得更新的元素）.但我想我可以自己解决这个问题，对于我的问题，这个答案很有效，谢谢！非常欢迎！如果需要，您可能想用更精确的
document.getElementById（$cart['productid'.$cart['kuubkosten']）替换
document.querySelectorAll
）
这将针对输入的唯一
id
还添加了一个简明的
形式，如果您不想麻烦
谢谢，这也解决了我的ajax问题，因为我现在刚刚在两个文件中添加了这一行。
(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);
         });