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，而您的代码中均未引用。），但是通过查看代码，我将您的问题理解为...

"Trying to provide an 'Alert' when input field reaches a max number (specified by data-max attribute) after the the field value has been incremented or decremented by the +/- buttons"

假设这就是您要完成的工作...

您需要将事件处理程序（decrement（））移至输入按钮，而不是输入文本字段，因为按钮是接收用户事件的按钮。由于按钮不接收按键事件，因此thius也需要处于onclick状态。您在文本输入中具有“只读”属性，因此我假设无法通过文本/键盘进行编辑？

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

除非您要在其他地方处理这些事件，否则您实际上需要使用增量/减量输入按钮来做一些事情。

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;
}

您应该在每个增量函数之后调用check（）函数（重命名为isOverMax（）以便更声明性和语义正确）。 !isOverMax()
如果那是您的目标，则应添加一个条件以实际上防止输入字段增加到最大值以上。一种方法是从isOverMax（）函数返回一个布尔值。

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/

希望这会有所帮助！

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

1 个答案: