如何在 HTML 中的 <input> 标记中设置“最大值”？

Question

我可以设置“最大值”吗            <input type="number" step="10" min="10"                   th:max=""                   th:field="*{coins}" required>在 ? 中创建变量        <script>            var wallet = [[${session.student.wallet}]];            var price = [[${item.itemCost}]];            var lowerValue = Math.min(wallet, price);        </script>问题是将 中可见值中较小的一个分配给“max”。

Answer 1

如果你给你的输入一个id像 (<input id="my-input"...) 这样的属性，那么它应该像这样简单

document.getElementById("my-input").setAttribute("max", myCalculatedValue)：

let

  wallet = 50.00,

  price = 42.00;

const myCalculatedValue = Math.min(wallet, price);

const myInput = document.getElementById("my-input");

myInput.setAttribute("max", myCalculatedValue);

<input id="my-input" type="number" step="10" min="10" />

Answer 2

//default the max to 99

document.getElementById("yourinput").max = 99;

// setMax gets triggered by the button's `onclick` attribute

function setMax() {

   let max = document.getElementById("yourmax").value;

   document.getElementById("yourinput").max = max;

}

<!-- Note that I gave your elements IDs so JS can reference them -->

Default <b>max=99</b> got set when page loaded. Try it below.<br/>

Set max here: <input id="yourmax" value="10"><br/>

Click this button to apply your NEW max: <button onclick="setMax()">Set Max</button></br>

Max gets set on this input: <input id="yourinput" type="number" min="0" style="width:50px;">

Answer 3

您只需使用 Thymeleaf 即可做到这一点。

<input type="number"
       step="10" min="10"
       th:max="${T(Math).max(session.student.wallet, item.itemCost)}"
       th:field="*{coins}"
       required>