วิธีเข้าถึงรายชื่อติดต่อจากสมุดที่อยู่

Thomas Steiner

บางครั้งคุณต้องการให้ผู้ใช้แอปเลือกรายชื่อติดต่อที่จะส่งข้อความผ่านอีเมลหรือแอปพลิเคชันแชท หรือช่วยให้ผู้ใช้ค้นพบรายชื่อติดต่อที่ได้เข้าร่วมแพลตฟอร์มโซเชียลแล้ว

แนวทางสมัยใหม่

การใช้ Contact Picker API

หากต้องการรับรายชื่อติดต่อจากสมุดที่อยู่ คุณต้องใช้ Contact Picker API ซึ่งช่วยให้ ผู้ใช้เลือกรายการจากรายชื่อติดต่อและแชร์รายละเอียดรายการที่เลือก อย่างจำกัดกับแอปของคุณ โดยยังมีพร็อพเพอร์ตี้มากมาย เช่น name, email, tel, address และ icon หากต้องการทราบข้อมูลเกี่ยวกับพร็อพเพอร์ตี้ที่รองรับการใช้งานจริง โปรดโทรไปที่ navigator.contacts.getProperties() หากต้องการอนุญาตให้ผู้ใช้เลือกรายชื่อติดต่อหลายรายการ ให้ส่ง {multiple: true} เป็นพารามิเตอร์ที่ 2 ของ navigator.contacts.select()

การสนับสนุนเบราว์เซอร์

  • x
  • x
  • x
  • x

แหล่งที่มา

Contact Picker API พร้อมใช้งานใน Chrome เวอร์ชัน Android ตั้งแต่เวอร์ชัน 80

วิธีคลาสสิก

การใช้แบบฟอร์มปกติ

วิธีสำรองคือการใช้แบบฟอร์มปกติที่ให้ผู้ใช้ป้อนรายละเอียดของรายชื่อติดต่อ

การสนับสนุนเบราว์เซอร์

  • 1
  • 12
  • 1
  • อย่างน้อย 4

แหล่งที่มา

การเพิ่มประสิทธิภาพแบบต่อเนื่อง

หากรองรับ Contact Picker API ให้ซ่อนช่องฟอร์มแบบคงที่และแสดงปุ่มตัวเลือกแทน

const button = document.querySelector('button');
const name = document.querySelector('.name');
const address = document.querySelector('.address');
const email = document.querySelector('.email');
const tel = document.querySelector('.tel');
const pre = document.querySelector('pre');
const autofills = document.querySelectorAll('.autofill');

if ('contacts' in navigator) {
  button.hidden = false;
  for (const autofill of autofills) {
    autofill.parentElement.style.display = 'none';
  }
  address.parentElement.style.display = 'block';
  button.addEventListener('click', async () => {
    const props = ['name', 'email', 'tel', 'address'];
    const opts = { multiple: false };
    try {
      const [contact] = await navigator.contacts.select(props, opts);
      name.value = contact.name;
      address.value = contact.address;
      tel.value = contact.tel;
      email.value = contact.email;
    } catch (err) {
      pre.textContent = `${err.name}: ${err.message}`;
    }
  });
}

อ่านเพิ่มเติม

ข้อมูลประชากร

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to access contacts from the address book</title>
  </head>
  <body>
    <h1>How to access contacts from the address book</h1>

    <p>Ship your order as a present to a friend.</p>
    <button hidden type="button">Open address book</button>
    <pre></pre>

    <label> Name <input class="name" autocomplete="name"></label>

    <label hidden>Address <input class="address" required></label>

    <label>Street <input class="autofill" autocomplete="address-line1" required></label>

    <label>City <input class="autofill" autocomplete="address-level2" required></label>

    <label>State / Province / Region (optional) <input class="autofill" autocomplete="address-level1"></label>

    <label>ZIP / Postal code (optional) <input class="autofill" autocomplete="postal-code"></label>

    <label>Country <input class="autofill" autocomplete="country"></label>

    <label>Email<input class="email" autocomplete="email"></label>

    <label>Telephone<input class="tel" autocomplete="tel"></label>
  </body>
</html>

CSS


        html {
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  color-scheme: dark light;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
}

input {
  display: block;
  margin-block-end: 1rem;
}

JS


        const button = document.querySelector('button');
const name = document.querySelector('.name')
const address = document.querySelector('.address')
const email = document.querySelector('.email')
const tel = document.querySelector('.tel')
const pre = document.querySelector('pre')
const autofills = document.querySelectorAll('.autofill')

if ('contacts' in navigator) {
  button.hidden = false;
  for (const autofill of autofills) {
    autofill.parentElement.style.display = 'none'
  }
  address.parentElement.style.display = 'block';
  button.addEventListener('click', async () => {
    const props = ['name', 'email', 'tel', 'address'];
    const opts = {multiple: false};
    try {
      const [contact] = await navigator.contacts.select(props, opts);
      name.value = contact.name;
      address.value = contact.address;
      tel.value = contact.tel
      email.value = contact.email;
    } catch (err) {
      pre.textContent = `${err.name}: ${err.message}`
    }
  });
}