Looking for a trick to display numbers "pretty" when leaving edit mode in a form

My form has two mode: Edit mode and Read mode.

I want to display numbers in a formatted way when in Read mode, and display inputs when in Edit mode.
The way I’ve achieved this so far is to hide the borders of the input when in Read mode.
But that trick, while simpler at the beginning, doesn’t allow me to change the displayed value, because it is still an HTML input element, not just a text, meaning I must keep the value as it is, I can’t simply add a space inside a number, or else it won’t be a valid number anymore.

Here is a video
https://watch.screencastify.com/v/U6hb3hg6wRK7IVU5iJcq

Read mode:

Edit mode:

I couldn’t find any “format” ability in the Weweb Input element, and I don’t see any other way than having both an Input and a Text element for each value to display, and conditionally display the Input/Text based on the Edit/Read mode.

Is there an easier way?

1 Like