Tel input autofill drops international prefix

user_192594 0
Viewed 1393

I have an input field of type "tel" with autocomplete enabled.

  <input type="tel" name="phone" autocomplete="tel" />

In Safari (both iOS and macOS), when I start entering a phone number with international prefix, e.g. +49 151, and then choose from the autofill options, the international prefix is removed.

selecting phone number from autofill options input value doesn't contain international prefix

Also, when I listen to change event, the prefix is already missing in event.target.value.

Here is a quick sandbox that demonstrates the issue:
https://codesandbox.io/s/lively-lake-bunh5?file=/src/app/app.component.html
(It happens to be an Angular app, but the issue is not limited to Angular)

How can I get the full phone number in Safari?

autofill safari forms html
1 Answers

I hope this might help.

A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields:

"tel-country-code" The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.

"tel-national" The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".

link to above

user_109341080
Related