ContactAddress.recipient — Eigenschaft · JavaScript-Referenz

Signatur

ContactAddress.recipient

Beschreibung

Die Eigenschaft recipient des Interfaces ContactAddress liefert den Namen der Person oder Stelle, an die eine Adresse gerichtet ist. Das ist zum Beispiel der Empfänger einer Lieferung oder der Ansprechpartner einer Firmenadresse. Der Wert ist schreibgeschützt.

ContactAddress-Objekte erzeugst du nicht selbst. Du bekommst sie von der Contact Picker API: Wenn du navigator.contacts.select() mit der Eigenschaft 'address' aufrufst, enthält jeder zurückgegebene Kontakt ein Array address mit ContactAddress-Einträgen.

Typische Anwendungsfälle sind das Vorausfüllen von Liefer- oder Rechnungsformularen, das Erstellen von Adressetiketten und die Übernahme von Kontaktdaten in eine Web-App, ohne dass die Nutzer alles abtippen müssen. Der Name in recipient kann sich vom Kontaktnamen (contact.name) unterscheiden, etwa bei einer Firmenadresse mit einem eigenen Ansprechpartner.

Sind keine Daten vorhanden, ist der Wert ein leerer String. Prüfe ihn daher vor der Verwendung und greife bei Bedarf auf den Kontaktnamen zurück.

Rückgabewert

Typ

string

Beschreibung

Name des Empfängers, Käufers oder Ansprechpartners. Leerer String, wenn keine Angabe vorhanden ist.

Beispiele

Empfänger einer gewählten Adresse auslesen

const button = document.querySelector('#kontakt-waehlen');

button.addEventListener('click', async () => {
  // select() braucht eine Nutzeraktion, zum Beispiel einen Klick
  const [contact] = await navigator.contacts.select(['name', 'address']);
  if (!contact || contact.address.length === 0) return;

  const adresse = contact.address[0];
  console.log('Empfänger:', adresse.recipient);
});

Empfänger: Erika Mustermann

Lieferformular vorausfüllen, mit Rückgriff auf den Kontaktnamen

const supported = 'contacts' in navigator && 'ContactsManager' in window;

const fuelleLieferformular = async () => {
  if (!supported) {
    console.warn('Contact Picker API wird nicht unterstützt.');
    return;
  }

  const verfuegbar = await navigator.contacts.getProperties();
  if (!verfuegbar.includes('address')) {
    console.warn('Adressen können nicht abgefragt werden.');
    return;
  }

  const [contact] = await navigator.contacts.select(['name', 'address']);
  const adresse = contact?.address?.[0];
  if (!adresse) return;

  // recipient kann leer sein, dann den Kontaktnamen verwenden
  const name = adresse.recipient || contact.name?.[0] || '';

  document.querySelector('#name').value = name;
  document.querySelector('#plz').value = adresse.postalCode;
  document.querySelector('#ort').value = adresse.city;
  document.querySelector('#strasse').value = adresse.addressLine.join(', ');
};

document.querySelector('#autofill').addEventListener('click', fuelleLieferformular);

Adressetikett aus mehreren Kontakten erzeugen

const erzeugeEtikett = (adresse) => [
  adresse.recipient,
  adresse.organization,
  ...adresse.addressLine,
  `${adresse.postalCode} ${adresse.city}`.trim(),
  adresse.country
].filter(Boolean).join('\n');

document.querySelector('#etiketten').addEventListener('click', async () => {
  const kontakte = await navigator.contacts.select(['address'], { multiple: true });
  const etiketten = kontakte.flatMap((k) => k.address.map(erzeugeEtikett));
  console.log(etiketten.join('\n---\n'));
});

Erika Mustermann Beispiel GmbH Hauptstraße 1 10115 Berlin DE

// Wichtig · Fallstricke

Experimentell und kaum unterstützt: Die Contact Picker API gibt es praktisch nur in Chromium-Browsern unter Android. Firefox, Safari und Desktop-Chrome unterstützen sie nicht, sie ist nicht Baseline. Prüfe immer vorher mit 'contacts' in navigator und navigator.contacts.getProperties(), ob sie verfügbar ist.
Sicherer Kontext und Nutzeraktion: select() funktioniert nur über HTTPS und nur als Reaktion auf eine Nutzeraktion, etwa einen Klick. Außerhalb davon wird das Promise mit einem Fehler abgelehnt.
Leerer String: recipient ist nicht null, sondern ein leerer String, wenn nichts hinterlegt ist. Ein einfacher Rückgriff mit || funktioniert deshalb.
Datenschutz: Der Name ist ein personenbezogenes Datum. Übertrage und speichere ihn nur mit Zustimmung und nur so weit, wie es nötig ist (DSGVO).
Sicherheit: Behandle den Wert als Nutzereingabe. Setze ihn per textContent oder value ein, nicht per innerHTML, damit kein XSS entstehen kann.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung hat keine Wirkung und löst im Strict Mode einen TypeError aus.

Siehe auch

ContactAddress.region ContactAddress.city ContactAddress.phone ContactAddress.addressLine ContactAddress.country