Keeping undo functionality while editing input number format

Question

I am trying to format an input number to two decimals as suggested in HTML5 Number Input - Always show 2 decimal places, but it disrupts the possibility to undo the input.

Is there a way to format numbers while keeping undo?

Try the following:

<input value="1.11" id="i"
onchange="this.value=parseFloat(this.value).toFixed(2)">
<br>Change ↑ to 1.111, hit tab
and try to undo.

Type a number then remove focus, it changes to the desired format. But you are not able to ctrl-Z back.

provide some code.Please read the guidlines https://stackoverflow.com/help/minimal-reproducible-example . — Abhishek Pakhare, Jan 16 '20 at 08:24
Actually, undo still works if the input is already in the required format. Looks like toFixed runs only if necessary. — Giulio, Jan 17 '20 at 14:24

score 2 · Accepted Answer · answered Jan 17 '20 at 12:33

Sadly, this is intended behavior. Last browser that kept history entries of text fields values even across "external" script alterations used to be Firefox, but it allegedly posed performance drawbacks, especially in comparison with other browsers discarding history, so it had been crippled to match them. (See https://bugzilla.mozilla.org/show_bug.cgi?id=1523270 )

Takeaway as I understand is that to keep user's undo history for altered field you have to roll your own history management, for which there does not seem that sufficiently reliable APIs exists. So the only option seems to be storing history manually, hijacking keyboard events and listening to key combinations that could normally trigger undo. What sound quite futile.

Keeping undo functionality while editing input number format

1 Answers1