Format the display of a field

Question

I'm aware that parsing numbers with pure CSS is impossible. But as in my case I know for certain that the input will always be in a specific way, is it possible to change the display of an input field based on the count of characters in it?

e.G. I want '123450' to be displayed as '1,234.50' - or if it were 'abcdef' it should become 'a,bcd.ef'.

So, I would like a rule that says: from right to left: after the second char display a dot, after the fifth and eight char display a comma.

Is that possible?

Example:

<input type="text" class="unformatted" value="123456" />

Should display like

<input type="text" class="formatted" vaulue="1,234.56" />

while still retaining its original value 123456.

The input should be editable and should it still retain the value unformatted? — Fabrizio Calderan, Feb 19 '18 at 11:23
@fcalderan If at all possible, yes. If not then I have to parse the input on the receiving end which complicates matters. — Angelo Fuchs, Feb 19 '18 at 11:34
https://nosir.github.io/cleave.js/ take a look at "numeral formatting" section — Fabrizio Calderan, Feb 19 '18 at 11:43
@fcalderan I'm looking for a CSS Solution, doing this in JS is already documented in the linked question. — Angelo Fuchs, Feb 19 '18 at 12:00

score 0 · Answer 1 · answered Feb 19 '18 at 12:00

What you're asking is not possible with pure CSS. The smallest you can go with CSS is the single HTML tag, you cannot go deeper than that.
Individual lines of text cannot be selected or altered, as they are seen as a whole by CSS engine.

With a little help from JavaScript, however, this can be easily done.

Format the display of a field

1 Answers1