HTMLтолько номер с минимальным и максимальным значением

Question

Я пытаюсь получить атрибуты min = "" и max = "", работающие на вводе только числа.Использование <input type="number"> исключено из-за ужасной поддержки браузером локализации (точки должны быть тысячами разделителей, запятыми в качестве десятичного разделителя, как при вводе, так и при отправке).Оптимально, при отправке формы каждой формы, он будет проверять эти определенные поля, если число следует за шаблоном и находится в правильном диапазоне, как это было бы изначально для ввода типа = "число".

В качестве альтернативы, если это возможно или проще, я также открыт для использования <input type="number" />, если в шаблоне, знаках валюты и, самое главное, запятые принимаются ОБА, значение = "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" /> это позволит мне ввести любое значение, которое я хочу, но при отправке формы проверьте, является ли численно проанализированное значениеполе (без учета знаков или точек валюты, понимая запятые как десятичные) находится в диапазоне от 0 до 1500. Оптимально, но это не так важно, я также хотел бы стрелки увеличения и уменьшения с шагом = "0,01"например, для ввода типа =" число ".

К сожалению, у меня совершенно нет идей о том, как реализовать это для каждого поля и не запускать глобальный 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

Tweaks : я просто добавил функцию validateCurrency() и выполнил ее для события blur, чтобы проверить min и max