Question

我正在尝试使min =“”和max =“”属性仅在数字输入上起作用。由于浏览器对本地化的糟糕支持，因此无法使用<input type="number">（输入和提交中的点应为千位分隔符，逗号为十进制分隔符）。理想情况下，在提交每个表单的表单时，它都会检查数字是否遵循模式并在正确范围内，以检查某些特定字段，就像它对输入“数字”的本机操作一样。

或者，如果有可能，或者更容易，我也愿意使用<input type="number" />，只要用户使用模式，货币符号，最重要的是，逗号都接受value =“ 123,12”输入AND并将值提交给服务器。

到目前为止，我使用的是pattern =“-？（\ d + | \ d {1,3}（\。\ d {3}）*）（，\ d +）？”除了最小值和最大值之外，该值已经可以验证输入。

预期的行为是，在<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

html <input type =“ text” />仅数字，具有最小值和最大值

1 个答案: