Improve balance amount input on mobile

[mekanics]

Summary

• Change the balance amount field from a telephone input to a text input with inputmode="decimal" so iOS shows a decimal-friendly keyboard.
• Add a frontend regression test covering the amount input type, input mode, and preserved pattern.

[yagebu]

According to MDN, this would show the decimal separator for the users locale - does that always allow entering a . as decimal separator as well?

[mekanics]

good catch. and actually the decimal input doesn't support the - either, so as I see it we could:

a) keep inputmode="decimal" for the good keypad and just normalize the separator (a typed locale , → .) before saving, since beancount/Decimal() only accept .. negatives will only work on desktop.
b) add a +/− toggle button next to the field. works on every keyboard, but doesn't really fit into the design. and we still need to normalize the value (option a).
c) change to type="number", which shows the full keyboard with -, . and all the special chars. downside is we lose the nice compact numeric keypad on mobile.

Here is a small example of the different inputs:
https://htmlpreview.github.io/?https://gist.githubusercontent.com/mekanics/30201fc5c7fb57a9aacb1a4b755aadeb/raw/2a470c4d4fc08ee345cba5ace2ad790ffb4168d3/index.html

I'm leaning towards c), but curious what you prefer.