我有一个计算器,可以从输入中获取值,然后执行一些计算。每个输入都是type="number"
字段。一切正常,但如果您使用.
或-
,则计算器工作不正常。我在控制台中看到一个空值,但它与,
一起正常工作。我添加了pattern="\d+(,\d{2})?"
,但也许我做错了什么,但这没有用?
我需要禁止输入.
和-
,如果有人解释如何在,
之后将值减少为两个字符以使其看起来像价格,那就太棒了。 / p>
谢谢
以下是我的例子:
$('.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: 380px;
height: 48px;
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: 0.667em 0;
}
/** Added to reduce clutter. */
.calculator-inputs-left-row__text,
.calculator-results-item__text {
display: inline-block;
width: 13em;
font-weight: bold;
}
.calculator-inputs-left-row__text:after,
.calculator-results-item__text:after {
content : ': ';
}
.calculator-inputs-left-row__input,
.calculator-results-item__result {
display: inline-block;
}

<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">Price GBO ($)</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">Price fuel ($)</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">Price gas ($)</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">Consumption on 100 km (l)</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">Average daily mileage (km)</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">Get result</div>
<div class="calculator-line"></div>
<div class="calculator-results">
<div class="calculator-results-item">
<div class="calculator-results-item__text">Daily savings ($)</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">For 5 years of operation ($)</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">Payback period (days)</div>
<div class="calculator-results-item__result">
<span id="feedback_time"></span>
</div>
</div>
</div>
&#13;
答案 0 :(得分:0)
您可能希望使用parseFloat
解析输入:
var calculator = {
priceGbo: parseFloat($('#price_gbo').val()),
"12"*"5.0"
之类的计算将在Javascript中生效并生成60
,而"12"*"5,0"
将返回NaN
。
将字符串解析为浮点数可以解决问题:
parseFloat("12")*parseFloat("5,0") == 60 // true
答案 1 :(得分:0)
要真正回答这个问题:
<input type="number" pattern="^(?:\d|[^.e-])+$"/>
输入验证仅在您使用带有<form onSubmit="javascript:doCalculation()">
按钮的<input type="submit"/>
元素时才有效。只有在验证成功时才会调用onSubmit
处理程序。
某个按钮的onClick处理程序始终能够在不进行任何验证的情况下读取当前值。
https://www.w3schools.com/tags/att_input_pattern.asp
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern
答案 2 :(得分:0)
数字字段中不允许使用,
等字符。请查看specs以获取W3C浮点数数据类型。
你需要做几件事:
以下示例显示了所有这些内容。
// Change number fields to text with number validation.
// See: https://stackoverflow.com/questions/13412204/localization-of-input-type-number
$('.calculator-input').each(function() {
$(this).attr('type', 'text').attr('pattern', '\\d+(,\\d{2})?');
});
$('.calculator-button').on('click', function() {
var calculator = {
priceGbo: currencyParser($('#price_gbo').val()),
priceFuel: currencyParser($('#price_fuel').val()),
priceGas: currencyParser($('#price_gas').val()),
priceMile: currencyParser($('#expenses_mile').val()),
priceDay: currencyParser($('#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));
});
// See: https://gist.github.com/leodutra/3057153
function currencyParser(str) {
str = (str + '').replace(/[^\d,.-]/g, '');
var sign = str.charAt(0) === '-' ? '-' : '+';
var minor = str.match(/[.,](\d+)$/);
str = str.replace(/[.,]\d*$/, '').replace(/\D/g, '');
return Number(sign + str + (minor ? '.' + minor[1] : ''));
}
&#13;
.call-modal {
width: 380px;
height: 48px;
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: 0.667em 0;
}
/** Added to reduce clutter. */
.calculator-inputs-left-row__text,
.calculator-results-item__text {
display: inline-block;
width: 13em;
font-weight: bold;
}
.calculator-inputs-left-row__text:after,
.calculator-results-item__text:after {
content : ': ';
}
.calculator-inputs-left-row__input,
.calculator-results-item__result {
display: inline-block;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="return false">
<div class="calculator-inputs-left">
<div class="calculator-inputs-left-row">
<div class="calculator-inputs-left-row__text">Price GBO ($)</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">Price fuel ($)</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">Price gas ($)</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">Consumption on 100 km (l)</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">Average daily mileage (km)</div>
<div class="calculator-inputs-left-row__input">
<input type="number" class="calculator-input" id="expenses_day" min="0" value="">
</div>
</div>
</div>
<button type="submit" class="call-modal calculator-button">Get result</button>
</form>
<div class="calculator-line"></div>
<div class="calculator-results">
<div class="calculator-results-item">
<div class="calculator-results-item__text">Daily savings ($)</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">For 5 years of operation ($)</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">Payback period (days)</div>
<div class="calculator-results-item__result">
<span id="feedback_time"></span>
</div>
</div>
</div>
&#13;