Developing an online HTML for and want the user to enter their phone number.
They are supposed to enter only numbers; no parenthesis and no dashes.
As they enter their numbers, I'd like it to display in a formatted way: (999) 999-9999
I'd tried to use the "pattern" attribute with no success.
I'd also tried to use the "data mask" attribute with no success.
Here's my code:
The "pattern" attribute is only used to validate the input value and should prevent a user from submitting a form if the number doesn't match the pattern. This should be good for making sure a user enters at least 10 numbers before they submit the form.
I wasn't sure by what you meant by "data mask" attribute but perhaps you mean using a "data-inputmask" attribute per this article: https://css-tricks.com/input-masking/
It says you'll need to use the jQuery dependency to get that working.
Looks like there is no simple, native HTML solution to what you want to do. It's going to require scripting and/or a plug-in/dependency.
A "data mask" pre-fills the textarea with the format of the data so when someone enters their phone number - numbers only, rather than a bunch of numbers - 5553456789 - it would show as (555) 345-6789.
JQuery as above my knowledge area.
I thought maybe by using the pattern attribute it would format the input, but I guess not.