نحوه دسترسی به مخاطبین از دفترچه آدرس

توماس اشتاینر

گاهی اوقات می خواهید به کاربران برنامه خود اجازه دهید یکی از مخاطبین خود را برای پیام دادن از طریق ایمیل یا برنامه چت انتخاب کنند، یا به آنها کمک کنید تا بفهمند کدام یک از مخاطبین آنها قبلاً به یک پلت فرم اجتماعی پیوسته اند.

روش مدرن

با استفاده از Contact Picker API

برای دریافت مخاطبین از دفترچه آدرس، باید از Contact Picker API استفاده کنید، که به کاربران امکان می‌دهد ورودی‌ها را از فهرست مخاطبین خود انتخاب کنند و جزئیات محدود ورودی‌های انتخاب‌شده را با برنامه شما به اشتراک بگذارند. چندین ویژگی مانند name ، email ، tel ، address و icon موجود است. برای اطلاع از ویژگی های پشتیبانی شده مشخص، با navigator.contacts.getProperties() تماس بگیرید. برای اینکه کاربر بتواند چندین مخاطب را انتخاب کند، {multiple: true} را به عنوان دومین پارامتر navigator.contacts.select() ارسال کنید.

پشتیبانی مرورگر

  • ایکس
  • ایکس
  • ایکس
  • ایکس

منبع

Contact Picker API در نسخه اندروید کروم از نسخه 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}`
    }
  });
}