كيفية الوصول إلى جهات الاتصال من دفتر العناوين

Thomas Steiner

تريد أحيانًا السماح لمستخدمي تطبيقك باختيار إحدى جهات الاتصال الخاصة بهم للمراسلة عبر تطبيق بريد إلكتروني أو دردشة، أو تريد مساعدتهم في اكتشاف جهات الاتصال التي انضمّوا إليها من قبل إلى منصة اجتماعية.

الطريقة الحديثة

استخدام واجهة برمجة تطبيقات Contact Picker

للحصول على جهات اتصال من دفتر العناوين، عليك استخدام واجهة برمجة التطبيقات Contact Picker API للمستخدمين باختيار الإدخالات من قائمة جهات الاتصال الخاصة بهم ومشاركة تفاصيل محدودة من الإدخالات المحددة مع التطبيق. عدة خصائص مثل name وemail وtel وaddress وicon. لمعرفة المزيد من المعلومات عن السمات المتوافقة بشكل ملموس، يمكنك الاتصال بـ navigator.contacts.getProperties(). للسماح للمستخدم باختيار عدة جهات اتصال، اضبط السمة {multiple: true} كمَعلمة ثانية للسمة navigator.contacts.select().

التوافق مع المتصفح

  • x
  • x
  • x
  • x

المصدر

تتوفّر واجهة برمجة تطبيقات Contact Picker من Google في إصدار 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}`
    }
  });
}