jquery 如何使一个值下降到输入字段的给定最大值？

mwyxok5s 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(134)

所以我有很多输入字段，它们有不同的max="values"。但是当有人把一个像一个数字以上的价值，它不会做任何事情，直到你点击按钮。这些div是在Jquery中创建的，因为我需要将一些数据放入其中。我怎么能自动四舍五入到输入字段的最大值，例如，如果最大值是4，有人把5或6在输入字段，它应该自动转到4没有点击任何按钮
这是我的代码：

// console.log(missedProductSlip[0].productList)
    $(missedProductSlip[0].productList).each(function(i, e) {
        $("#card-deck").append(
            '<div id="card' + i + '" class="card" style="width:200px; float:left; margin:10px" ><div id="productID' + i + '" hidden>' + missedProductSlip[0].productList[i].productID + '</div><img style="width:200px;height:200px; object-fit: contain;" class="card-img-top" src="' + missedProductSlip[0].productList[i].image + '" alt="Card image cap"><div class="card-body"><h5 class="card-title text-center" >' + missedProductSlip[0].productList[i].product + '</h5><p class="card-text text-center">' + missedProductSlip[0].productList[i].eanCode + '</p><div class="input-group mb-2"><div class="input-group-prepend"><div class="input-group-text">' + missedProductSlip[0].productList[i].number + '</div></div><input type="number" class="form-control" id="amountInput' + i + '" min="0" max="' + missedProductSlip[0].productList[i].number + '" step="1"></div><button id="' + i + '" class="btn btn-primary">Product gevonden</button></div></div>'
        )
    })

    $("button").click(function() {
        var input = $("#amountInput" + this.id).val()
        var productID = $("#productID" + this.id).text()



        // console.log("card" + this.id); // or alert($(this).attr('id'));
    });
})

字符串
此代码中最重要的是id为amountInput的input
这是div的样子：

的数据

jquery

来源：https://stackoverflow.com/questions/76669686/how-to-make-a-value-go-down-to-the-inputs-fields-given-max-value

2条答案

按热度按时间

qco9c6ql1#

您可以向输入字段添加一个onchange事件，并触发一个向下舍入（或向上舍入以获得最小输入）的函数。

<input type="text" name="txt" value="Hello" onchange="myFunction(this)">

字符串
然后在你的js中，你可以这样做：

function myFunction(input) {
  const inputVal = $(input).val();
  if (inputVal > {my_max_allowed_value}) {
    $(input).val({my_max_allowed_value})
  }
}

型
在这个函数中，我们获取输入元素并从中获取值。然后我们检查该值是否高于我们允许的最大值。如果是，我们将该值设置为最大允许值。
我希望这有帮助！

赞(0）回复(0）举报 2023-08-04

fumotvh32#

使用@Vincent Meijering在代码片段上使用的方法进行编辑

function watchMax(element) {
  if (parseInt(element.value) > element.max) element.value = element.max;
};

个字符
因此，您可能需要像下面这样更改代码：

// console.log(missedProductSlip[0].productList)
$(missedProductSlip[0].productList).each(function(i, e) {
    $("#card-deck").append(
            '<div id="card' + i + '" class="card" style="width:200px; float:left; margin:10px" ><div id="productID' + i + '" hidden>' + missedProductSlip[0].productList[i].productID + '</div><img style="width:200px;height:200px; object-fit: contain;" class="card-img-top" src="' + missedProductSlip[0].productList[i].image + '" alt="Card image cap"><div class="card-body"><h5 class="card-title text-center" >' + missedProductSlip[0].productList[i].product + '</h5><p class="card-text text-center">' + missedProductSlip[0].productList[i].eanCode + '</p><div class="input-group mb-2"><div class="input-group-prepend"><div class="input-group-text">' + missedProductSlip[0].productList[i].number + '</div></div><input type="number" class="form-control" id="amountInput' + i + '" min="0" max="' + missedProductSlip[0].productList[i].number + '" step="1" onChange="watchMax(this)"></div><button id="' + i + '" class="btn btn-primary">Product gevonden</button></div></div>'
    ) // added the onChange="watchMax(this)" event listener
})

$("button").click(function() {
    var input = $("#amountInput" + this.id).val()
    var productID = $("#productID" + this.id).text()

function watchMax(element) {
  if (parseInt(element.value) > element.max) element.value = element.max;
} // added this function to handle the event listener to the input

型

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 如何使一个值下降到输入字段的给定最大值？

2条答案

相关问题

热门标签

最新问答