When I on a form and the focus is on the phone number field, iPhone will sometime suggest my phone number just above the keyboard. Like in the image below.
I am trying to implement this functionality via inputmode and type=tel,
<input type="tel" inputmode="tel" />
but my phone number doesn't show up above the keyboard. Where as on other websites, it sometimes does.
Is there an attribute or css rule that enables this functionality?
P.S. After an assist from the folks answering this question, it seems that autocomplete="tel" works to a certain degree. I found the following with iOS 15.2:
- You must have your phone number entered in your own contact. And that contact must be selected in Settings/Siri & Search/My Information. Otherwise the phone number is not suggested.
- If you recently received a 2FA code as text, iPhone will suggest it instead of the phone number for a while. Deleting the 2FA text and restarting Safari will get the phone number suggestion to come back.
CodePudding user response：
Yes. Use the autocomplete attribute.
<input autocomplete=tel type=tel inputmode=tel>Possible attribute values for a telephone input are:
- "on": The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.
- "tel": 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".
- "tel-area-code": The area code, with any country-internal prefix applied if appropriate.
- "tel-local": The phone number without the country or area code. This can be split further into two parts, for phone numbers which have an exchange number and then a number within the exchange. For the phone number "555-6502", use
CodePudding user response：
Have you tried enabling/disabling autocomplete on the input?
<input type="tel" inputmode="tel" autocomplete="on"/>