Bazen uygulamanızın kullanıcılarının, kişilerinden birini e-posta ya da sohbet uygulaması aracılığıyla seçmesine izin vermek veya kişilerinden hangilerinin daha önce bir sosyal platforma katılmış olduğunu keşfetmelerine yardımcı olmak istersiniz.
Modern yöntem
Kişi Seçici API'sini kullanma
Adres defterindeki kişileri almak için Contact Picker API'yi kullanmanız gerekir. Bu API, kullanıcıların kendi kişi listelerindeki girişleri seçmelerine ve seçilen girişlerin sınırlı ayrıntılarını uygulamanızla paylaşmalarına olanak tanır. name, email, tel, address ve icon gibi çeşitli özellikler mevcuttur.
Somut olarak desteklenen özellikler hakkında bilgi edinmek için navigator.contacts.getProperties() çağrısı yapın. Kullanıcının birden çok kişi seçmesine izin vermek için {multiple: true} değerini navigator.contacts.select() öğesinin ikinci parametresi olarak geçirin.
Contact Picker API, Chrome'un Android 80 ve sonraki sürümlerinde kullanılabilir.
Klasik yöntem
Normal bir form kullanma
Yedek yöntem, kullanıcının kişi bilgilerini girmesine olanak tanıyan normal bir form kullanmaktır.
Progresif geliştirme
Contact Picker API'si destekleniyorsa statik form alanlarını gizleyin ve bunun yerine bir seçici düğmesi gösterin.
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}`;
}
});
}
Daha fazla bilgi
Demografi
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}`
}
});
}