如何在接受浮點值的輸入類型上設置最小值和最大值？

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>