CSS to target specific chars in a text input (for formatting purposes).

[jisaacks]

Formatted text in Javascript is easy, but formatting an input field that the user can edit, paste, cut etc. is extremely difficult. However if we could use CSS to target the input value's characters we could achieve what would be very difficult with Javascript. And we could do it very simply.

If we had a pseudo element for targeting and styling an input's characters called :chars here is how we could use it to apply formatting:

Say we had the element <input class="my-input" value="1111111111111111">

if we used the css:

.my-input:chars:not(:last-child):nth-child(4n):after {
  content: ' - ';
}

It would render as so: 1111 - 1111 - 1111 - 1111

However because theses dashes and spaces are pseudo characters they would not be editable, selectable or submitted as part of the value. Making it super efficient at maintaining it's formatting as the user edits, deletes, pastes, etc.

If instead we wanted to format this like a number we could use:

.my-input:chars:nth-last-child(3n):before {
  content: ',';
}

Would render 1,111,111,111,111,111

If we wanted to format like a phone number we could use:

.my-input:chars:first-child:before {
  content: '(';
}
.my-input:chars:nth-child(4):before {
  content: ') ';
}
.my-input:chars:nth-child(7):before {
  content: ' - ';
}

Which would render: (111) 111 - 1111111111 Which we could combine with a maxLength to get the desired effect.

I think this is a common enough desire and very hard to create in JS. But I think this would be relatively easy for browsers to do and would create a richer input experience very easily.

[domenic]

Hi there, welcome.

You may want to take a look at https://whatwg.org/faq#adding-new-features, in particular steps 1 and 2. Let's first try to figure out what this thread is asking for in terms of use cases, and only then worry about specific concrete proposals.

[jisaacks]

@domenic Thanks for the note. Let me take another stab at this..

Use case: Formatting input text to make it easier for the user to see mistakes in their inputs and accurately read their input values.

Most of the time, developers want to apply common formatting to input values specifically to make it easier for the user to type correctly.

A credit card number that looks like XXXX XXXX XXXX XXXX is much easier to read than XXXXXXXXXXXXXXXX and will cause the user to make less mistakes. Same goes for a phone number that looks like (XXX) XXX - XXXX instead of XXXXXXXXXX or a social security number that looks like XXX-XX-XXXX instead ofXXXXXXXXX`. etc. etc.

This is very difficult to achieve with JavaScript because the formatting would become part of the input value itself. The user has the ability to make edits at any point, and cut or past from any selection. This makes it extremely difficult to figure out after the user makes a change (from typing, deleting, cutting or pasting from selected spans of characters) what parts of the newly edited input value are the formatting that we added earlier or characters that the user has input.

Almost everyone is trying to achieve something like this in one way or another in their form inputs, yet every open source implementation that tries to solve it is riddled with bugs. I think that makes this a good candidate for being part of the HTML spec.

@domenic Is this more appropriate?

[domenic]

That's very helpful, thank you! I think @gregwhitworth and others are looking in to filling such form control gaps in https://github.com/WICG/open-ui; their input might also be helpful.