Есть калькулятор, который принимает значеия из 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>