Signatur
Beschreibung
Die schreibgeschützte Eigenschaft dependentLocality des Interfaces ContactAddress enthält eine untergeordnete Ortsangabe innerhalb der Stadt (city). Das kann z. B. ein Stadtteil, ein Viertel, ein Bezirk oder ein eingemeindeter Ortsteil sein, etwa „Schwabing“ in München oder „Prenzlauer Berg“ in Berlin.
ContactAddress-Objekte bekommt man über die Contact Picker API: Ruft man navigator.contacts.select() mit der Eigenschaft 'address' auf, enthält jeder zurückgegebene Kontakt ein Array address mit ContactAddress-Instanzen. Die Struktur entspricht der von PaymentAddress aus der Payment Request API.
Gebraucht wird die Eigenschaft vor allem dann, wenn man Adressen vollständig darstellen oder speichern will. In manchen Ländern ist der Ortsteil Teil der postalischen Anschrift, etwa in Großbritannien, Südkorea oder China. In Deutschland bleibt das Feld meistens leer. Ist keine Angabe vorhanden, ist der Wert ein leerer String.
Rückgabewert
"").Beispiele
Stadtteil aus einem ausgewählten Kontakt lesen
const button = document.querySelector('#kontakt-waehlen');
button.addEventListener('click', async () => {
// Feature-Erkennung: Die API gibt es nur in wenigen Browsern
if (!('contacts' in navigator) || !('select' in navigator.contacts)) {
console.warn('Contact Picker API wird nicht unterstützt.');
return;
}
try {
const [kontakt] = await navigator.contacts.select(['name', 'address']);
const adresse = kontakt?.address?.[0];
if (adresse) {
console.log('Stadt:', adresse.city);
console.log('Stadtteil:', adresse.dependentLocality || '(keine Angabe)');
}
} catch (err) {
console.error('Auswahl abgebrochen oder fehlgeschlagen:', err);
}
});Vollständige Adresszeile inklusive Ortsteil formatieren
const formatiereAdresse = (a) => {
const strasse = a.addressLine.join(', ');
// Den Ortsteil nur anhängen, wenn er gesetzt ist
const ort = [a.postalCode, a.city].filter(Boolean).join(' ');
const ortMitTeil = a.dependentLocality ? `${ort}-${a.dependentLocality}` : ort;
return [strasse, ortMitTeil, a.country].filter(Boolean).join(', ');
};
const waehleAdressen = async () => {
const kontakte = await navigator.contacts.select(['address'], { multiple: true });
for (const kontakt of kontakte) {
for (const adresse of kontakt.address) {
console.log(formatiereAdresse(adresse));
}
}
};
document.querySelector('#import').addEventListener('click', waehleAdressen);Ortsteil in ein Formularfeld übernehmen
const uebernehmeInFormular = async () => {
const unterstuetzt = await navigator.contacts?.getProperties?.();
if (!unterstuetzt?.includes('address')) {
console.log('Adressen können nicht abgefragt werden.');
return;
}
const [kontakt] = await navigator.contacts.select(['address']);
const adresse = kontakt?.address?.[0];
if (!adresse) return;
document.querySelector('#stadt').value = adresse.city;
document.querySelector('#ortsteil').value = adresse.dependentLocality;
};
document.querySelector('#autofill').addEventListener('click', uebernehmeInFormular);// Wichtig · Fallstricke
- Experimentell und kaum verbreitet: Die Contact Picker API gibt es im Wesentlichen nur in Chrome und Edge für Android (ab Version 80). Desktop-Browser, Firefox und Safari unterstützen sie standardmäßig nicht. Prüfe deshalb immer vorher mit
'contacts' in navigator, ob die API vorhanden ist. - Sicherer Kontext und Nutzergeste:
navigator.contacts.select()funktioniert nur über HTTPS, nur im Top-Level-Frame und nur als Reaktion auf eine Nutzeraktion, z. B. einen Klick. - Häufig leer: Viele Adressbücher speichern keinen eigenen Ortsteil. Rechne deshalb mit einem leeren String und nicht mit
null. Verlass dich nicht darauf, dass das Feld gefüllt ist. - Schreibgeschützt: Zuweisungen an die Eigenschaft werden ignoriert bzw. werfen im Strict Mode einen Fehler.
- Datenschutz: Adressdaten sind personenbezogen. Frage nur die Eigenschaften ab, die du wirklich brauchst, und übertrage sie nicht ungefragt an einen Server.