איך לגשת לאנשי קשר מפנקס הכתובות

Thomas Steiner

לפעמים רוצים לאפשר למשתמשים באפליקציה לבחור באחד מאנשי הקשר שלהם כדי לשלוח להם הודעה באמצעות אפליקציית אימייל או צ'אט, או לעזור להם לגלות מי כבר הצטרף לפלטפורמה חברתית.

הדרך המודרנית

שימוש ב-Contact Picker API

כדי לקבל אנשי קשר מפנקס הכתובות צריך להשתמש ב-Contact Picker API, שמאפשר למשתמשים לבחור רשומות מרשימת אנשי הקשר ולשתף עם האפליקציה פרטים מוגבלים על הרשומות שנבחרו. יש מספר נכסים כמו name, email, tel, address ו-icon. כדי לקבל מידע נוסף על המאפיינים הנתמכים באופן פיזי, אפשר להתקשר ל-navigator.contacts.getProperties(). כדי לאפשר למשתמש לבחור כמה אנשי קשר, מעבירים את {multiple: true} כפרמטר השני של navigator.contacts.select().

תמיכה בדפדפן

  • x
  • x
  • x
  • x

מקור

Contact Picker API זמין בגרסת Android של Chrome מגרסה 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}`
    }
  });
}