Idea for auto-format revival

[ctjhoa]

Hi,

I have something in mind to revive some kind of auto-formatting and I want your feedback on it.
My idea may sound silly at first but I'm convinced that it could solve some drawbacks of the intial autoFormat option.

Ok so my idea is to use CSS to format the phone number instead of JS.
Here is an example https://jsfiddle.net/oh21fsc4/11/

We need to wrap all digit in <span> and use CSS to apply dynamically style according to the country code.

Advantages:

• Formats can be externalize into a CSS library
• Copy/paste a phone number doesn't include the format
• intl-tel-input logic stay the same
• You can imagine loading only formats that you use

Drawback:

• We should rely on div contenteditable instead of an input
• Catching keypress is still necessary as we need to wrap digit in a <span>
• It could not do conversion: national from/to international format

Anyway, tell me what you think about it.

[jackocnr]

Hey, I think this is a really neat approach, and I agree it does solve some of the problems of the original approach. Sadly it does not solve all of them, and additionally it would require a massive effort to code up and maintain all of the formatting rules in the CSS. I guess one new issue I foresee is that it might be frustrating/confusing for users that they cannot manually delete formatting chars - if you try, you end up deleting the adjacent digit, and then the formatting shifts and group the numbers in a confusing way. Also I wonder about the browser support for the contenteditable attribute?

That said, if you wanted to code this up as a separate standalone project, I would be very happy to link to it, if you can get it to a usable state - as I say, I think it's a really cool idea!

[ctjhoa]

Thanks for your feedback,
I agree with you that it's a big project. I may start it one day :)

For the record, contenteditable is widely supported.
https://caniuse.com/#search=contenteditable

You can close the issue if you want.

[ctjhoa]

Some notes to myself with the same idea:
https://github.com/davatron5000/Lettering.js
https://css-tricks.com/a-call-for-nth-everything/