ContactAddress.phone — Eigenschaft · JavaScript-Referenz

Signatur

ContactAddress.phone

Beschreibung

Die Eigenschaft phone eines ContactAddress-Objekts enthält die Telefonnummer, die zu einer bestimmten Postanschrift gehört, also z. B. die Nummer des Empfängers, unter der ein Paketdienst ihn erreichen kann. ContactAddress-Objekte bekommt man nicht per Konstruktor. Sie entstehen, wenn Nutzerinnen und Nutzer über navigator.contacts.select() mit der Eigenschaft "address" Kontakte aus dem Adressbuch des Geräts freigeben.

Wichtig ist der Unterschied zur Kontakt-Eigenschaft tel: tel ist ein Array aller Telefonnummern eines Kontakts, ContactAddress.phone gehört dagegen genau zu einer Adresse. In der Praxis ist dieser Wert oft leer, weil viele Adressbücher Telefonnummern nicht an Adressen koppeln.

Nutzen kann man die Eigenschaft etwa, um Liefer- oder Rechnungsformulare vorab auszufüllen: Adresse und die passende Rückrufnummer werden zusammen übernommen, ohne dass der Nutzer tippen muss. Weil der Wert vom Adressbuch stammt, sollte man ihn vor dem Speichern immer prüfen und vereinheitlichen.

Rückgabewert

Typ

string

Beschreibung

Die Telefonnummer, die zur Adresse gehört. Ist keine Nummer hinterlegt, ist das Ergebnis ein leerer String "". Das Format ist nicht einheitlich, sondern hängt vom Adressbuch ab (z. B. "+49 30 1234567" oder "030/1234567").

Beispiele

Telefonnummer der Lieferadresse auslesen

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

button.addEventListener('click', async () => {
  if (!('contacts' in navigator && 'ContactsManager' in window)) {
    console.log('Contact Picker API wird nicht unterstützt.');
    return;
  }

  // Adressen vorher auf Unterstützung prüfen
  const supported = await navigator.contacts.getProperties();
  if (!supported.includes('address')) {
    console.log('Adressen können nicht abgefragt werden.');
    return;
  }

  try {
    // select() muss durch eine Nutzeraktion ausgelöst werden
    const [contact] = await navigator.contacts.select(['name', 'address']);
    const address = contact?.address?.[0];
    console.log('Telefon an der Adresse:', address?.phone || '(keine Angabe)');
  } catch (err) {
    console.error('Auswahl fehlgeschlagen:', err);
  }
});

Telefon an der Adresse: +49 30 1234567

Lieferformular vorab ausfüllen, mit Ersatzwert aus tel

const fillShippingForm = async () => {
  const [contact] = await navigator.contacts.select(['name', 'address', 'tel']);
  if (!contact) return; // Nutzer hat abgebrochen

  const address = contact.address?.[0];
  // phone ist oft leer, dann auf die erste Kontaktnummer ausweichen
  const phone = address?.phone || contact.tel?.[0] || '';

  document.querySelector('#name').value = contact.name?.[0] ?? '';
  document.querySelector('#strasse').value = address?.addressLine.join(', ') ?? '';
  document.querySelector('#plz').value = address?.postalCode ?? '';
  document.querySelector('#ort').value = address?.city ?? '';
  document.querySelector('#telefon').value = phone;
};

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

Nummer vereinheitlichen und per toJSON() weitergeben

const normalizePhone = (raw) => raw.replace(/[^\d+]/g, '');

const sendAddresses = async () => {
  const contacts = await navigator.contacts.select(['address'], { multiple: true });

  const payload = contacts.flatMap((c) =>
    (c.address ?? []).map((addr) => ({
      ...addr.toJSON(),
      phone: normalizePhone(addr.phone)
    }))
  );

  console.log(payload.map((a) => a.phone));
  await fetch('/api/adressen', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
};

["+49301234567", ""]

// Wichtig · Fallstricke

Experimentell und kaum verbreitet: Die Contact Picker API gibt es nur in Chromium-Browsern auf Android (ab Version 80). Desktop-Browser, Firefox und Safari unterstützen sie standardmäßig nicht. Prüfen Sie die Unterstützung immer vorher (Feature Detection) und bieten Sie ein normales Formular als Ausweichlösung an.
Nur in sicheren Kontexten: Die API funktioniert nur über HTTPS, nur im Top-Level-Fenster und nur, wenn select() durch eine Nutzeraktion (z. B. einen Klick) ausgelöst wird.
Häufig leer: Ist keine Nummer hinterlegt, liefert phone einen leeren String und nicht null. Prüfen Sie deshalb mit || statt mit ??, wenn Sie einen Ersatzwert setzen wollen.
Kein einheitliches Format: Die Nummer wird so übernommen, wie sie im Adressbuch steht (mit Leerzeichen, Klammern, mit oder ohne Ländervorwahl). Vereinheitlichen und prüfen Sie sie vor dem Speichern, z. B. in das E.164-Format.
Datenschutz: Telefonnummern sind personenbezogene Daten (DSGVO). Fragen Sie nur Eigenschaften ab, die Sie wirklich brauchen, und übertragen Sie sie nur verschlüsselt.
Die Eigenschaft ist schreibgeschützt. Wenn Sie ihr etwas zuweisen, wird das ignoriert (im Strict Mode gibt es keinen Fehler, weil es sich um einen Getter auf dem Prototyp handelt, der Wert ändert sich aber nicht).

Siehe auch

Navigator.contacts ContactAddress.city ContactAddress.region ContactAddress.country ContactAddress.postalCode