How to 'push' digits to the left in an input?

Question

I've seen this done on other websites before, and I've been googling more than an hour and can't seem to find what I'm trying to do. Essentially;

When a visitor types "1" into the input, the input formats it as 0.01

Then they type "0", which becomes 0.10

Then another "0", which becomes 1.00

So each number they type sort of 'fills in' from the right, preserving two decimal places. How to do that?

You'd do that with javascript and `onChange`... Show us what you tried so far and we can help you with it — Dominik, Aug 31 '20 at 22:18
There could be many different ways to achieve this. Have you tried anything yourself? If not, take a look at `padStart` and `padEnd` string methods. Or perhaps they split the string into an array and modify it? — evolutionxbox, Aug 31 '20 at 22:18
@dominik, yeah I figured out the onChange part, but getting the number to format the way I'm wanting I've been stuck. I can trim numbers off the right, and add 0's to the left, but haven't been able to figure out how to 'shift' the input to the left, as each number is added. — Brispo, Aug 31 '20 at 22:21
onchange is not the right event to use as it's triggered on blur, so the user would have to move focus out of the control for it to work. More likely you want keydown, keyup or input events. BTW, this is really annoying for users, also it creates a usability nightmare. What if a user types 1, then 2, then moves the insertion point and deletes the 1. What do you do? — RobG, Aug 31 '20 at 22:32
It's not simple. Keydown gives immediate feedback but the input value lags, and keyup gives the correct input value, but the visual feedback lags. — evolutionxbox, Aug 31 '20 at 22:38
@RobG, the problem I'm having is that my site has a 'donate' button where people set the amount they want to donate. I've had people accidentally donate $4000, because they thought "4", "0", "0", "0" would be interpreted at $40.00 Agreed that keyup is better to use in this case than onChange — Brispo, Aug 31 '20 at 22:38
That seems like a usability or UI issue that won't be fixed by a complicated (and likely fragile) input field. You can make it a two step process so once they enter an amount, confirm "You are about to donate $4,000. Thank you for your generous contribution — OK — Cancel". — RobG, Aug 31 '20 at 22:44
I think the onInput event is what you want.... But, Have you considered using the `pattern` attribute to force the use of a currency format? Check out this question/answers https://stackoverflow.com/questions/5963158/html5-form-input-pattern-currency-format — 2pha, Aug 31 '20 at 22:50
I agree with RobG that there should probably be some sort of confirmation. — 2pha, Aug 31 '20 at 22:54
I guess my question was removed for 'not being about programming', but I think I agree that instead of achieving the behavior I originally was asking about, a better approach would be a combination of @charlietfl and RobG's suggestions to have a confirmation message, as well as displaying ".00" to the right of the input field, indicating to the user that they do not need to enter 0's for the decimal. It's a UI issue really, but it's a mistake that is a huge pain for me when people make it, so if these suggestions reduce occurrence, I'm a happy camper. — Brispo, Aug 31 '20 at 23:01

score 1 · Answer 1 · answered Aug 31 '20 at 23:21

This will do it (now even with deleting chars),

document.getElementById('inp').addEventListener('input', function() {
    if (isNaN(this.value))
        return;
    this.value = this.value.replace('.','');
    if (this.value.length==1) {
        this.value = '0.0' + this.value;
    } else if (this.value.length==2) {
        this.value = '0.' + this.value;
    } else {
        this.value =  +this.value.slice(0,-2) +'.' + this.value.substr(-2);
    }
});

<input id='inp'>

How to 'push' digits to the left in an input?

1 Answers1