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

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

Thomas Steiner

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

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

استخدام Contact Picker API

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

Browser Support

Source

تتوفّر واجهة برمجة التطبيقات Contact Picker API في إصدار Android من Chrome بدءًا من الإصدار 80.

الطريقة الكلاسيكية

استخدام نموذج عادي

الطريقة الاحتياطية هي استخدام نموذج عادي يتيح للمستخدم إدخال تفاصيل جهة الاتصال.

Browser Support

Source

التحسين التدريجي

إذا كانت واجهة برمجة التطبيقات 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}`
    }
  });
}

كيفية الوصول إلى جهات الاتصال من دفتر العناوين تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.