User input currency extra decimal

Question

I have a user input box where users can type in an amount of USD currency. When the user types in a decimal to represent cents ex. 0.24 the value shows as 0.20 instead of .24 when the input is .244 or .240 it shows as the .24 cents. I would like the user to be able to type in just the .24 cents instead of having to enter in the extra decimal.

var $partialText = $('#partialText');

$partialText.on('keypress', function() {
var $dark = parseFloat($partialText.val()); //Take the input value of partial input as a number

console.log($dark);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="partial" id="partialText" size="15" maxlength="6" />

Please edit your question and include the relevant HTML and any CSS. — Scott Marcus, Feb 15 '21 at 16:40
Please provide enough code in your snippet where someone can click Run code snippet and see what you're asking about. See [ask] and [mre] for more information. — Heretic Monkey, Feb 15 '21 at 16:40

score 0 · Accepted Answer · answered Feb 15 '21 at 17:06

0

The value you are receiving in your onKeyPress handler is lagging behind the value you've entered. This should help: How to get text of an input text box during onKeyPress?

answered Feb 15 '21 at 17:06

Kiran

340
2
11

score 0 · Answer 2 · answered Feb 15 '21 at 17:10

You can use the input event instead, which will also handle cases such as pasting text into the field.

var $partialText = $('#partialText');

$partialText.on('input', function() {
var $dark = parseFloat($partialText.val()); //Take the input value of partial input as a number

console.log($dark);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="partial" id="partialText" size="15" maxlength="6" />

User input currency extra decimal

2 Answers2