HTML5 Number Input - Always show 2 decimal places

Question

Is there\'s any way to format an input[type=\'number\'] value to always show 2 decimal places?

Example: I want to see 0.00 instead of

Answer 1

My preferred approach, which uses data attributes to hold the state of the number:

// react to stepping in UI
el.addEventListener('onchange', ev => ev.target.dataset.val = ev.target.value * 100)

// react to keys
el.addEventListener('onkeyup', ev => {

    // user cleared field
    if (!ev.target.value) ev.target.dataset.val = ''

    // non num input
    if (isNaN(ev.key)) {

        // deleting
        if (ev.keyCode == 8)

            ev.target.dataset.val = ev.target.dataset.val.slice(0, -1)

    // num input
    } else ev.target.dataset.val += ev.key

    ev.target.value = parseFloat(ev.target.dataset.val) / 100

})