javascript - 如何在 javascript 中设置从数据库输入的最大数量？

Question

我希望根据数据库中的数量在“输入类型=数字”中设置最大输入数量。目前，在我尝试从我的数据库中获取最大值之前，我正在尝试让它基于 data-max 工作，但它似乎无法工作。

之前在这里有人问过，但是我还是不明白: Set maximum number input text from database in php/javascript

HTML:

 <div class="ui-block-a">
                                    <div id="test">
                                        <input type="button" value="-" class="minus" id="jumlah" name="jumlah">
                                    </div>
                                </div>

                                <div class="ui-block-b">

                                    <input type="number" min="1" max="10" id="quantity" value="0" name="quantity" title="Qty" class="input-text qty text" size="6" pattern="" inputmode="" data-max="3" onkeyup="check(this);" readonly>

                                </div>

                                <div class="ui-block-c">
                                    <div id="test2">
                                        <input type="button" value="+" class="plus" id="jumlah2" name="jumlah2">
                                    </div>
                                </div>

JS:

function check(quantity) {
    div.addEventListener('click', function () { });
    var max = quantity.getAttribute("data-max");
    if (parseInt(quantity.value) > parseInt(max)) {
        alert("Amount out of max!");
    }
}

Answer 1

根据您提供的信息，很难准确理解您要完成的任务以及问题所在(即，您提到了数据库依赖项和 php，但您的代码中均未引用这两者。) ，但是通过查看代码，我会将您的问题解读为...

“在字段值已通过 +/- 按钮递增或递减后，当输入字段达到最大数量(由 data-max 属性指定)时，尝试提供‘警报’”

假设这是您要完成的目标...

1. 您需要将事件处理程序 ( decrement() ) 移动到输入按钮，而不是输入文本字段，因为按钮是接收用户事件的地方。 thius 也需要 onclick 因为按钮不接收 keyup 事件。您在文本输入上具有“只读”属性，所以我假设无法通过文本/键盘进行编辑？

<input type="button" value="-" onclick="decrement()" class="minus" id="jumlah" name="jumlah">

1. 除非您在其他地方处理这些事件，否则您实际上需要对递增/递减输入按钮执行某些操作。

function increment () {
  let quantity = document.getElementById('quantity'),
            newVal =  Number(quantity.value) + 1;
  if (!isOverMax()) {
    quantity.value = newVal;
  }
}
function decrement () {
    let quantity = document.getElementById('quantity');
    quantity.value = Number(quantity.value) - 1;
}

1. 您应该在每个增量函数之后调用 check() 函数(重命名为 isOverMax() 以更具声明性和语义正确性)。 !isOverMax()

2. 如果这是您的目标，您应该添加一个条件来实际防止输入字段增加到最大值以上。一种方法是从 isOverMax() 函数返回一个 bool 值。

function isOverMax() {
  let max = quantity.getAttribute("data-max");

  if (parseInt(quantity.value) >= parseInt(max)) {
    alert("Amount out of max!");
    return true;
  }
  return false;
}

这段代码绝对可以组织得更好，但应该让您更接近您想要完成的目标。

完整的工作示例...

https://jsfiddle.net/aguy2mwx/

希望这对您有所帮助!