Đôi khi, bạn muốn cho phép người dùng ứng dụng chọn một trong các liên hệ của họ để nhắn tin qua email hay ứng dụng trò chuyện, hoặc giúp họ phát hiện liên hệ nào đã tham gia nền tảng xã hội.
Phong cách hiện đại
Sử dụng API Bộ chọn danh bạ
Để lấy người liên hệ từ sổ địa chỉ, bạn cần sử dụng API Bộ chọn danh bạ để cho phép người dùng chọn các mục trong danh bạ của họ và chia sẻ với ứng dụng của bạn một số thông tin chi tiết giới hạn về các mục đã chọn. Có một số thuộc tính như name
, email
, tel
, address
và icon
.
Để tìm hiểu về các thuộc tính được hỗ trợ cụ thể, hãy gọi navigator.contacts.getProperties()
. Để cho phép người dùng chọn nhiều mục liên hệ, hãy truyền {multiple: true}
làm tham số thứ hai của navigator.contacts.select()
.
API Bộ chọn danh bạ hiện có trong phiên bản Chrome 80 dành cho Android.
Cách cổ điển
Sử dụng biểu mẫu thông thường
Phương pháp dự phòng là sử dụng một biểu mẫu thông thường cho phép người dùng nhập thông tin chi tiết của mục liên hệ.
Cải tiến tăng dần
Nếu API Bộ chọn danh bạ được hỗ trợ, hãy ẩn các trường biểu mẫu tĩnh và hiện nút bộ chọn.
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}`;
}
});
}
Tài liệu đọc thêm
Bản minh hoạ
<!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;
}
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}`
}
});
}