如何在接受浮点值的输入类型上设置最小值和最大值？

Question

有很多例子展示了如何用整数设置最小值和最大值。 我需要确保值的范围甚至可以是浮动的。 下面是我如何为输入类型refund_amount设置属性值和最大值。 这里的问题是可以输入一个高于 Jquery 设置的最大值的值。

window.onload = function() {
    var src = document.getElementById("grand_total");
    var dst = document.getElementById("refund_amount");
    if (dst != "") {
        dst.setAttribute("value", src.textContent);
        dst.setAttribute("max", src.textContent);       
    }
};

HTML：

<tr>
  <td align="right" colspan="3">Enter Refund Amount</td>
  <td align="left" colspan="4"><input type="text" size="11" id="refund_amount" 
                 name="refund_amount" value='' min="" max="" required/></td>
</tr>

我如何确保它永远不会允许高于 max 属性的值？

Answer 1

min和max属性仅适用于type="number"输入。 还值得注意的是，它们作为验证手段并不可靠，因为它们不会阻止用户输入超出min / max设置范围的数字。

要解决此问题，您可以使用change事件以及Math.min()和Math.max()函数手动验证值并更正它以使其在范围内。 尝试这个：

 window.addEventListener('load', function() { var src = document.getElementById("grand_total"); var dst = document.getElementById("refund_amount"); if (dst) { dst.value = dst.max = src.textContent; } }); document.querySelectorAll('input[type="number"]').forEach(input => { input.addEventListener('change', e => { let el = e.target; el.value = Math.min(Math.max(el.value, el.min), el.max); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>Grand total</td> <td id="grand_total">25.68</td> </tr> <tr> <td align="right" colspan="3">Enter Refund Amount</td> <td align="left" colspan="4"> <input type="number" step="1" min="11.11" id="refund_amount" name="refund_amount" value="" required /> </td> </tr> </table>