कभी-कभी ऐसा हो सकता है कि आप अपने ऐप्लिकेशन के उपयोगकर्ताओं को ईमेल या चैट ऐप्लिकेशन से मैसेज भेजने के लिए, उनके किसी संपर्क को चुनने की अनुमति देना चाहें. इसके अलावा, ऐसा भी हो सकता है कि उनकी संपर्क सूची में शामिल कौनसे संपर्क, पहले से ही सोशल मीडिया प्लैटफ़ॉर्म से जुड़े हों.
आधुनिक तरीका
संपर्क पिकर एपीआई का इस्तेमाल करना
पता पुस्तिका से संपर्क पाने के लिए, आपको
संपर्क पिकर एपीआई का इस्तेमाल करना होगा. यह उपयोगकर्ताओं को उनकी संपर्क सूची से एंट्री चुनने और चुनी गई एंट्री की सीमित जानकारी
आपके ऐप्लिकेशन के साथ शेयर करने देता है. name, email, tel, address, और icon जैसी कई प्रॉपर्टी उपलब्ध हैं.
अच्छी तरह काम करने वाली प्रॉपर्टी के बारे में जानने के लिए, navigator.contacts.getProperties() पर कॉल करें. उपयोगकर्ता को एक से ज़्यादा संपर्क चुनने की अनुमति देने के लिए, {multiple: true} को navigator.contacts.select() के दूसरे पैरामीटर के तौर पर पास करें.
संपर्क पिकर एपीआई, Chrome के Android वर्शन 80 में उपलब्ध है.
क्लासिक तरीका
सामान्य फ़ॉर्म का इस्तेमाल करना
फ़ॉलबैक का तरीका ऐसे सामान्य फ़ॉर्म का इस्तेमाल करना होता है जो उपयोगकर्ता को संपर्क की जानकारी डालने देता है.
प्रोग्रेसिव एन्हैंसमेंट
अगर कॉन्टैक्ट पिकर एपीआई काम करता है, तो स्टैटिक फ़ॉर्म फ़ील्ड को छिपाएं और उसकी जगह पर, पिकर बटन दिखाएं.
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}`;
}
});
}
इसके बारे में और पढ़ें
डेमो
एचटीएमएल
<!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>सीएसएस
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}`
}
});
}