HTML 不支持 <input type="contact">，因其未被 W3C 标准采纳；唯一可行方案是 navigator.contacts.select()，但仅 Chromium 内核浏览器在 HTTPS 或 localhost 下、用户手势触发且权限获准时可用，其余环境须降级处理。
HTML 原生不支持 Contact Picker API —— 它不是 HTML 标签，而是浏览器提供的 JavaScript 接口，且仅限安全上下文（https:// 或 localhost）下可用。
为什么 <input type="contact"> 不能用
这个写法看起来直观，但目前所有主流浏览器都**不识别**该 type。尝试使用会降级为普通文本框，甚至触发控制台警告：The input type="contact" is not supported in this browser。W3C 也从未将它纳入标准草案，所谓“HTML 原生联系人选择器”纯属误传。
navigator.contacts.select() 的实际调用条件
这是唯一可行的现代方案，但限制极严：
- 必须运行在
https://或http://localhost（127.0.0.1不行） - 必须由用户手势触发（如
click、tap），不能在页面加载或定时器中调用 - 需显式请求权限：调用前必须先检查
navigator.permissions.query({ name: 'contacts' }) - 仅 Chromium 内核浏览器支持（Chrome ≥ 80、Edge ≥ 80；Firefox / Safari 完全不支持）
示例最小可行调用：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
button.addEventListener('click', async () => {
try {
const contacts = await navigator.contacts.select(['name', 'email', 'tel'], { multiple: true });
console.log(contacts); // [{ name: ['Alice'], email: ['a@example.com'] }]
} catch (err) {
console.error(err.name); // 可能是 'NotAllowedError' 或 'SecurityError'
}
});
fallback 方案怎么写才不翻车
不能只靠 if ('contacts' in navigator) 判断——这会漏掉权限被拒、HTTPS 不满足等真实失败场景。正确 fallback 应分层处理：
- 先检查
navigator.contacts是否存在且navigator.contacts.select是函数 - 再调用
navigator.permissions.query看当前权限状态是否为'granted' - 若任一条件不满足，降级为手动输入表单（
<input name="email">等），并隐藏原按钮 - 避免在不支持环境里反复弹出权限请求，否则会被浏览器静默拦截
注意：iOS Safari 和旧版 Android WebView 完全无此 API，连检测都返回 undefined，必须提前兜底。
真正麻烦的不是调用代码，而是权限策略和跨平台兼容性——Chrome 上跑通的逻辑，在 Edge 可能因企业策略禁用，在安卓 WebView 里直接 undefined。别把 navigator.contacts 当成稳定接口用，它比 localStorage 还脆弱。
