HTML <input type=“text” /> 最小值和最大值的僅數字

Question

我試圖讓min =“”和max =“”屬性只在數字輸入上工作。 由於瀏覽器對本地化的糟糕支持，使用<input type="number">是不可能的（輸入和提交中的點應為千位分隔符，逗號應為十進制分隔符）。 最佳地，在提交每個表單的表單時，它都會檢查數字是否遵循模式並且在正確的范圍內，以檢查某些特定字段，就像它對類型=“ number”輸入的本機操作一樣。

另外，如果可能或更容易，我也願意使用<input type="number" /> ，只要模式，貨幣符號以及最重要的是，逗號都接受value =“ 123,12”，用戶輸入，並將值提交給服務器。

到目前為止，我使用pattern =“-？（\\ d + | \\ d {1,3}（\\。\\ d {3}）*）（，\\ d +）嗎？” 除最小值和最大值外，該值已經可以驗證輸入。

預期的行為是在<input type="text" pattern"-?(\\\\d+|\\\\d{1,3}(\\\\.\\\\d{3})*)(,\\\\d+)?" min="0" max="1500" /> <input type="text" pattern"-?(\\\\d+|\\\\d{1,3}(\\\\.\\\\d{3})*)(,\\\\d+)?" min="0" max="1500" />它可以讓我輸入所需的任何值，但是在提交表單時，請檢查該字段的數字分析值（省略貨幣符號或點，將逗號理解為十進制）是否為最佳范圍是0到1500。但這並不重要，我還希望增量和減量箭頭帶有step =“ 0.01”，例如對於type =“ number”輸入。

可悲的是，我完全不了解如何在每個字段上實現此功能，並且不在每個表單提交按鈕上運行全局javascript，從而防止了不是每個輸入都符合條件的默認設置。 但是，即使我這樣做了，如何顯示type =“ number”會給我的正確（本地化）警告呢？

Answer 1

 $("input[data-type='currency']").on({ keyup: function() { formatCurrency($(this)); }, blur: function() { validateCurrency($(this)); formatCurrency($(this), "blur"); } }); function validateCurrency(input){ var c = parseFloat(input.val().replace(/\\,|$/g,'').replace('$','')); if(c<input.attr('min')){ input.val(input.attr('min')); }else if(c>input.attr('max')){ input.val(input.attr('max')); } } function formatNumber(n) { // format number 1000000 to 1,234,567 return n.replace(/\\D/g, "").replace(/\\B(?=(\\d{3})+(?!\\d))/g, ",") } function formatCurrency(input, blur) { // appends $ to value, validates decimal side // and puts cursor back in right position. // get input value var input_val = input.val(); // don't validate empty input if (input_val === "") { return; } // original length var original_len = input_val.length; // initial caret position var caret_pos = input.prop("selectionStart"); // check for decimal if (input_val.indexOf(".") >= 0) { // get position of first decimal // this prevents multiple decimals from // being entered var decimal_pos = input_val.indexOf("."); // split number by decimal point var left_side = input_val.substring(0, decimal_pos); var right_side = input_val.substring(decimal_pos); // add commas to left side of number left_side = formatNumber(left_side); // validate right side right_side = formatNumber(right_side); // On blur make sure 2 numbers after decimal if (blur === "blur") { right_side += "00"; } // Limit decimal to only 2 digits right_side = right_side.substring(0, 2); // join number by . input_val = "$" + left_side + "." + right_side; } else { // no decimal entered // add commas to number // remove all non-digits input_val = formatNumber(input_val); input_val = "$" + input_val; // final formatting if (blur === "blur") { input_val += ".00"; } } // send updated string to input input.val(input_val); // put caret back in the right position var updated_len = input_val.length; caret_pos = updated_len - original_len + caret_pos; input[0].setSelectionRange(caret_pos, caret_pos); } 

 input { border: 2px solid #333; border-radius: 5px; color: #333; font-size: 32px; margin: 0 0 20px; padding: .5rem 1rem; width: 50%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="currency-field" id="currency-field" pattern="^\\$\\d{1,3}(,\\d{3})*(\\.\\d+)?$" value="" data-type="currency" min="1000" max="1000000" placeholder="$200,000.00"> Minimum: 1000, Maximum: 1,000,000 

代碼 ：韋德·威廉姆斯@ 559wade

調整 ：我剛剛添加了validateCurrency()函數，並在blur事件上執行了該函數以檢查min和max