如何打开通讯录选择号码及创建可唤起通讯录的HTML输入字段？

嘿，我来帮你搞定这两个问题！

1. 手动打开通讯录并选择号码的操作步骤 #

不同移动平台的操作略有差异，这里分主流系统说明：

• iOS系统
  1. 打开主屏幕上的「通讯录」App（带人像图标的那个应用）
  2. 要么滚动列表找目标联系人，要么用顶部搜索框输入名字快速定位
  3. 点击联系人条目进入详情页，就能看到该联系人的所有关联号码，按需选择即可
• Android系统
  1. 打开主屏幕或应用抽屉里的「联系人/电话簿」App（不同品牌命名可能有差异，比如小米叫「联系人」）
  2. 通过列表滚动或顶部搜索栏找到目标联系人
  3. 点击联系人进入详情页，查看并选择对应的号码

2. HTML实现唤起通讯录选择号码的输入字段 #

你说得对，HTML目前没有专门的原生input类型直接唤起通讯录，但可以通过两种方式实现需求：

方式一：利用HTML输入框的自动补全适配 #

使用tel类型输入框配合autocomplete属性，部分移动端浏览器会自动唤起通讯录相关选项：

<input type="tel" autocomplete="tel" placeholder="选择联系人号码">

这个方案兼容性拉满，几乎所有移动端浏览器都支持，但唤起逻辑由浏览器决定，可能是提供通讯录号码的补全选项，而非直接弹出选择器。

方式二：使用Contact Picker API（现代浏览器支持） #

这是浏览器提供的原生API，能直接唤起系统通讯录选择器，让用户选择联系人并获取号码，需要通过JavaScript调用，示例代码如下：

<input type="text" id="contactNumber" placeholder="点击选择联系人号码">
<button onclick="pickContact()">选择联系人</button>

<script>
async function pickContact() {
  try {
    // 请求获取联系人的姓名与号码信息
    const contacts = await navigator.contacts.select(['name', 'tel'], { multiple: false });
    if (contacts.length > 0) {
      // 将选中的第一个号码填入输入框
      document.getElementById('contactNumber').value = contacts[0].tel[0].value;
    }
  } catch (err) {
    console.error('选择联系人失败:', err);
  }
}
</script>

注意：这个API需要在HTTPS环境下使用（本地开发的localhost也支持），且仅支持部分现代移动端浏览器（比如Chrome、Edge移动端，iOS Safari 15.4+）。如果用户浏览器不支持，建议搭配降级方案（比如允许手动输入号码）。

内容的提问来源于stack exchange，提问作者Aman