Formatting Phone Number Inputs

Published: 25 July 2022
on channel: Covalence
2,621
25

Start learning with the Covalence community at https://covalence.io

This video is a response to a great YouTube comment I got an a very old video of mine going over an interview question a student had received, which was to write a function that could take variable length number values, and format them to the appropriate style with parentheses for area codes, plus sign for international codes, and hyphenating the final 7 numbers.

I had a great time learning about the nuances of how browsers handle programmatically assigning values. Hopefully y'all learn something cool, too!

As always feel free to comment if you want more content.

Browser Validating via pattern attribute:
https://codepen.io/przekwas/pen/eYMvbwq

Library IMaskJS:
https://codepen.io/przekwas/pen/poLeGyX

Using JS Only (with cursor problem):
https://codepen.io/przekwas/pen/zYWZeYG

Hidden Inputs with lots of CSS:
https://codepen.io/przekwas/pen/NWYpeOz


Watch video Formatting Phone Number Inputs online without registration, duration hours minute second in high quality. This video was added by user Covalence 25 July 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,621 once and liked it 25 people.