1

Есть калькулятор, который принимает значеия из input-ов и затем производить необходимые математические вычисления. У каждого из инпутов type = "number", все работает нормально, но при вводе ., - перестает работает, значение отдает как пустое в консоль. С , работает все нормально. Попытался прописать pattern="\d+(,\d{2})?", но видимо не разобрался как он работает и ничего он мне не дал. Мне нужно запретить ввод .и-, ну и был бы признателен, если бы объяснили как ограничить ввод до 2 знаков после,`, чтобы выглядело как цена. Спасибо Вот моя функция и врестка

$('.calculator-button').on('click', function(){
    var calculator = {
        priceGbo: $('#price_gbo').val(),
        priceFuel: $('#price_fuel').val(),
        priceGas: $('#price_gas').val(),
        priceMile: $('#expenses_mile').val(),
        priceDay: $('#expenses_day').val()
    };

    var everydayEconomy = calculator.priceDay * (calculator.priceMile/100) * (calculator.priceFuel - calculator.priceGas * 1.1);
    var fiveYears = everydayEconomy * 1825;
    var feedbackTime = calculator.priceGbo / everydayEconomy;

    $('#everyday_economy').text(everydayEconomy.toFixed(0));
    $('#fiveYears_economy').text(fiveYears.toFixed(0));
    $('#feedback_time').text(feedbackTime.toFixed(0));

});
.call-modal {
	width: 377px;
	height: 50px;
	background: #ffc107;
	color: black;
	font-size: 18px;
	font-family: "Pt Sans Bold";
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	cursor: pointer;
	margin-top: 45px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "calculator-inputs-left">
  <div class = "calculator-inputs-left-row">
      <div class = "calculator-inputs-left-row__text">Цена ГБО (грн.)</div>
      <div class = "calculator-inputs-left-row__input">
          <input type = "number" pattern="\d+(,\d{2})?" class = "calculator-input" id = "price_gbo" min="0" value = "">
      </div>
  </div>
  <div class = "calculator-inputs-left-row">
      <div class = "calculator-inputs-left-row__text">Цена 1Л. бензина (грн.)</div>
      <div class = "calculator-inputs-left-row__input">
          <input type = "number" class = "calculator-input" id = "price_fuel" min="0" value = "">
      </div>
  </div>
  <div class = "calculator-inputs-left-row">
      <div class = "calculator-inputs-left-row__text">Цена 1Л. газа (грн.)</div>
      <div class = "calculator-inputs-left-row__input">
          <input type = "number" class = "calculator-input" id = "price_gas" min="0" value = "">
      </div>
  </div>
  <div class = "calculator-inputs-left-row">
      <div class = "calculator-inputs-left-row__text">Расход на 100 км пробега (л)</div>
      <div class = "calculator-inputs-left-row__input">
          <input type = "number" class = "calculator-input" id = "expenses_mile" min="0" value = "">
      </div>
  </div>
  <div class = "calculator-inputs-left-row">
      <div class = "calculator-inputs-left-row__text">Средний суточный пробег (км)</div>
      <div class = "calculator-inputs-left-row__input">
          <input type = "number" class = "calculator-input" id = "expenses_day" min="0" value = "">
      </div>
  </div>
</div>
<div class = "call-modal calculator-button">Получить результат</div>
  <div class = "calculator-line"></div>
  <div class = "calculator-results">
      <div class = "calculator-results-item">
          <div class = "calculator-results-item__text">Ежедневная экономия (грн.)</div>
          <div class = "calculator-results-item__result" >
              <span id = "everyday_economy"></span>
          </div>
      </div>
      <div class = "calculator-results-item">
          <div class = "calculator-results-item__text">За 5 лет экплуатации (грн.)</div>
          <div class = "calculator-results-item__result">
              <span id = "fiveYears_economy"></span>
          </div>
      </div>
      <div class = "calculator-results-item">
          <div class = "calculator-results-item__text">Срок окупаемости (дней)</div>
          <div class = "calculator-results-item__result">
              <span id = "feedback_time"></span>
          </div>
      </div>
  </div>

2
  • ничего не понятно что запретить 6 апр 2018 в 18:02
  • я тоже не понял, запретить знак "-" значит запретить отрицательные цисла? 6 апр 2018 в 18:26

2 ответа 2

1

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp через регулярки пишите паттерн который нужен

    $('input[type="number"]').on('keyup focus', (event) => {
        let select = $(event.currentTarget);
        select.val(select.val().replace(/[^0-9]/gi,'').replace(/\s+/gi,', '))
        + console.log( '#: '+select.val() );
    });

если бы объяснили как ограничить ввод до 2 знаков посл я бы сюда сходил https://igorescobar.github.io/jQuery-Mask-Plugin/#examples

0
1

Атрибут pattern задает выражение для валидации данных при submit'e формы. То есть, такая проверка и не должна срабатывать при вводе каждого символа. Плюс, она не фильтрует ввод.

Для решения вашей задачи, необходимо написать скрипт, который:

  1. либо будет проверять validity.valid элемента, сообщая пользователю что он накриворучил

let test = document.getElementById('test'); 
test.addEventListener('input', function () {
  if (this.validity.valid)
    this.classList.remove('err'); 
  else 
    this.classList.add('err'); 
}); 
#test.err { border-color: red; }
<input id="test" type="number" pattern="^\d+(?:,\d{0,2})?$">


2. либо, полностью реализует всю логику проверки/фильтрации

document.addEventListener('DOMContentLoaded', pInpInit);

function pInpInit() {
  let inputs = document.querySelectorAll('.input-regexp'); 
  for (let inp of inputs) {
    inp.addEventListener('input', onPInpInput); 
    inp.addEventListener('click', function () {
      this.lastCaretPos = this.selectionStart;
    }); 
  }
}

function onPInpInput() {
  if (!this.value.length) {
    this.lastValue = ''; 
    return; 
  }
  let regxpr = this.dataset.regexp; 
  if (!regxpr) 
    return; 
  regxpr = new RegExp(regxpr, 'i'); 
  if (this.value.match(regxpr)) {
    this.lastValue = this.value; 
    this.lastCaretPos = this.selectionStart;
  } else {
    this.value = this.lastValue || ''; 
    let pos = this.lastCaretPos || 0; 
    this.setSelectionRange(pos, pos); 
    this.classList.remove('anim'); 
    requestAnimationFrame(() =>  this.classList.add('anim')); 
  }
}
body { padding: 30vh 50px; }

@keyframes color-fade {
    0% { background-color: #f002; }
   50% { background-color: #f002; }
  100% { background-color: initial; }
}

.input-regexp {
  width: 150px; 
  text-align: center; 
  font: 20px sans-serif; 
}
.input-regexp.anim { animation: color-fade 0.5s linear; }
<input class="input-regexp" type="text" data-regexp="^\d+(?:,\d{0,2})?$">&emsp;
<input class="input-regexp" type="text" data-regexp="^\d+(?:[,.]\d{0,2})?$">

Во втором примере, левый инпут принимает в качестве разделителя только запятую, а правый - и запятую, и точку.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.