How can I get a number input element with a step motor to append a "0" to represent monetary vals?

Question

Thanks to help from Dave (so much for "Dave's not here") here: Is there a float input type in HTML(5)?, I've got a floating point element, but when I set the stop motor to 0.05, it goes:

0.05
0.1
0.15
0.2

etc.

I want it to represent money, so that it goes:

0.05
0.10
0.15
0.20

Will I have to write jQuery to append this "0" on the blurring of the widget, or...???

So you want to have two digits after the point all the time? — Pavlo, Sep 25 '13 at 19:49

score 1 · Accepted Answer · answered Sep 25 '13 at 20:11

I'm not aware of any means to format input value other than JavaScript:

document.querySelector('input[type=number]')
.addEventListener('change', function () {
    var parts = this.value.split('.');

    // Integer number
    if (parts.length < 2) {
        this.value += '.00';
    }

    // Single digit after the point
    else if (parts[1].length < 2) {
        this.value += '0';
    }
});

Demo: http://jsfiddle.net/kdUJm/

How can I get a number input element with a step motor to append a "0" to represent monetary vals?

1 Answers1