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