如何禁止输入中的字符

Question

I have a calculator that get values from inputs and then performs some calculations. Each input is a type="number" field. Everything works fine, but if you use . or - then the calculator works incorrectly. I see an empty value in console, but it works fine with , . I added pattern="\\d+(,\\d{2})?" , but maybe I did something wrong, but this didn't help?

I need to forbid input . and - , and it would be great if someone explain how to cut value to two characters after , to make it look like the price.

Thank you

Here is my example:

 $('.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> 

Answer 1

You might want to parse the input using parseFloat :

var calculator = {
  priceGbo: parseFloat($('#price_gbo').val()),

a calculation like "12"*"5.0" will work in Javascript and yield 60 , while "12"*"5,0" will return NaN .

Parsing the strings as floating point numbers fixes things:

parseFloat("12")*parseFloat("5,0") == 60 // true

Answer 2

To actually answer the question:

<input type="number" pattern="^(?:\d|[^.e-])+$"/>

input validation will only work if you use a <form onSubmit="javascript:doCalculation()"> element with an <input type="submit"/> button. Your onSubmit handler would only be called when validation is successful.

An onClick handler of some button will always be able to read the current value without any validation.

https://www.w3schools.com/tags/att_input_pattern.asp

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern

Answer 3

Characters such as , are not allowed inside the number field. Please review the specs for the W3C floating-point number datatype.

---

You need to do a couple things:

1. Wrap your inputs in a form to utilize native submit validation
2. Make the form return false on submission so that it does not navigate from the page.
3. Change all your inputs to a text field with a pattern. I added that logic at the very top.
4. Use a parser function to normalize all the numbers into proper floating-point numbers.

The example below shows all of this in action.

 // 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] : '')); } 

 .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> <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>