I was convinced that this already existed in the form of masked inputs, but after trying I realised those are broken in mobile Chromium and utterly unusable in mobile Firefox. As far as native components go, I think most platforms actually have a prebuilt control for this that works pretty well in my experience.
You'll probably need to do more than just strip dashes, though. You also need to strip spaces and parenthesis but keep other characters such as + and ~. Many prebuilt phone number input boxes have trouble with even normal American phone numbers, let alone foreign phone number systems. Even if you're only targeting American customers, you'll probably need to support the phone number format for a visiting foreigner as well.
With something as complex as phone numbers I'd just stick to using standard form validation code (like in the HTML standard) to warn users of explicitly invalid input like letters or most special characters and storing phone numbers as a 20 character random text strings for all other purposes. Phone numbers are like time zones, you'd think they're easy to deal with but they're surprisingly finicky to get right.
You'll probably need to do more than just strip dashes, though. You also need to strip spaces and parenthesis but keep other characters such as + and ~. Many prebuilt phone number input boxes have trouble with even normal American phone numbers, let alone foreign phone number systems. Even if you're only targeting American customers, you'll probably need to support the phone number format for a visiting foreigner as well.
With something as complex as phone numbers I'd just stick to using standard form validation code (like in the HTML standard) to warn users of explicitly invalid input like letters or most special characters and storing phone numbers as a 20 character random text strings for all other purposes. Phone numbers are like time zones, you'd think they're easy to deal with but they're surprisingly finicky to get right.