DataTransfer.getData() — Methode · JavaScript-Referenz

Signatur

DataTransfer.prototype.getData(format)

Beschreibung

getData() liest die Daten aus, die bei einem Drag-&-Drop-Vorgang oder einer Zwischenablage-Aktion im DataTransfer-Objekt hinterlegt wurden. Sie geben dabei einen Datentyp an, meist einen MIME-Typ wie text/plain, text/html oder text/uri-list. Zurück kommt immer eine Zeichenkette.

Typischerweise wird die Methode im drop-Handler aufgerufen, um die Daten auszuwerten, die zuvor im dragstart-Handler mit setData() gesetzt wurden. Auch bei paste-Ereignissen können Sie über event.clipboardData.getData() den eingefügten Inhalt lesen.

Wichtig: Aus Sicherheitsgründen geben Browser die Daten nur im geschützten Modus frei, also bei drop (bzw. paste). In dragenter, dragover und dragleave liefert getData() eine leere Zeichenkette. Welche Typen vorhanden sind, lässt sich dort aber über dataTransfer.types prüfen.

Gibt es für den angefragten Typ keine Daten, erhalten Sie ebenfalls eine leere Zeichenkette. Die Methode wirft in diesem Fall keinen Fehler. Dateien lesen Sie nicht mit getData() aus, sondern über dataTransfer.files oder dataTransfer.items.

Parameter

Name	Typ	Default	Beschreibung
$format Pflicht	string		Der Datentyp, der gelesen werden soll, z. B. `text/plain`, `text/html`, `text/uri-list` oder ein eigener Typ wie `application/x-meine-app`. Die Legacy-Kürzel `text` (wird zu `text/plain`) und `url` (wird zu `text/uri-list`) werden ebenfalls akzeptiert.

Rückgabewert

Typ

string

Beschreibung

Die gespeicherten Daten für den Typ als Zeichenkette. Wenn keine Daten vorhanden sind oder der Zugriff im aktuellen Modus nicht erlaubt ist, eine leere Zeichenkette "".

Beispiele

Element-ID per Drag & Drop übertragen

// HTML: <div id="karte-1" draggable="true">Aufgabe</div> <div id="spalte"></div>
const karte = document.getElementById('karte-1');
const spalte = document.getElementById('spalte');

karte.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', event.target.id);
  event.dataTransfer.effectAllowed = 'move';
});

// dragover muss abgebrochen werden, damit drop überhaupt ausgelöst wird
spalte.addEventListener('dragover', (event) => event.preventDefault());

spalte.addEventListener('drop', (event) => {
  event.preventDefault();
  const id = event.dataTransfer.getData('text/plain');
  const element = document.getElementById(id);
  if (element) spalte.appendChild(element);
  console.log(`Verschoben: ${id}`);
});

Verschoben: karte-1

Strukturierte Daten als JSON mit eigenem Typ

const MIME = 'application/x-aufgabe+json';

document.querySelector('.aufgabe').addEventListener('dragstart', (event) => {
  const aufgabe = { id: 42, titel: 'Bericht schreiben' };
  event.dataTransfer.setData(MIME, JSON.stringify(aufgabe));
  event.dataTransfer.setData('text/plain', aufgabe.titel); // Fallback
});

const ziel = document.querySelector('.ablage');

ziel.addEventListener('dragover', (event) => {
  // getData() liefert hier "" – deshalb über types prüfen
  if (event.dataTransfer.types.includes(MIME)) event.preventDefault();
});

ziel.addEventListener('drop', (event) => {
  event.preventDefault();
  const roh = event.dataTransfer.getData(MIME);
  if (!roh) return;
  const aufgabe = JSON.parse(roh);
  console.log(aufgabe.id, aufgabe.titel);
});

42 Bericht schreiben

Eingefügten Text beim paste-Ereignis bereinigen

const eingabe = document.querySelector('#editor');

eingabe.addEventListener('paste', (event) => {
  event.preventDefault();
  // Nur reinen Text übernehmen, HTML-Formatierung verwerfen
  const text = event.clipboardData.getData('text/plain').trim();
  document.execCommand('insertText', false, text);
  console.log('Eingefügt:', text);
});

Eingefügt: Hallo Welt

Gezogenen Link auswerten

const dropzone = document.querySelector('#link-ablage');

dropzone.addEventListener('dragover', (e) => e.preventDefault());

dropzone.addEventListener('drop', (event) => {
  event.preventDefault();
  // text/uri-list kann mehrere Zeilen und Kommentare (#) enthalten
  const urls = event.dataTransfer
    .getData('text/uri-list')
    .split(/\r?\n/)
    .filter((zeile) => zeile && !zeile.startsWith('#'));
  console.log(urls);
});

["https://example.com/"]

// Wichtig · Fallstricke

Geschützter Modus: Nur in drop (bzw. paste) liefert getData() echte Daten. In dragenter, dragover und dragleave bekommen Sie "". Prüfen Sie dort stattdessen dataTransfer.types.
drop wird nicht ausgelöst, wenn Sie im dragover-Handler nicht event.preventDefault() aufrufen. Das ist der häufigste Fehler.
Rufen Sie im drop-Handler preventDefault() auf. Sonst öffnen manche Browser (vor allem Firefox) gezogene Links oder Texte als Navigation.
Sicherheit: Gezogene oder eingefügte Daten können aus fremden Seiten oder Programmen stammen. Fügen Sie text/html nie ungeprüft über innerHTML ein, weil das XSS-Lücken öffnet. Verwenden Sie textContent oder bereinigen Sie das HTML (z. B. mit DOMPurify oder der Sanitizer-API).
Typnamen werden in Kleinbuchstaben umgewandelt. Eigene Typen sind zwischen verschiedenen Browsern und Programmen nicht immer verfügbar. Legen Sie deshalb zusätzlich einen text/plain-Fallback an.
Dateien werden nicht über getData() übertragen. Nutzen Sie dafür dataTransfer.files bzw. dataTransfer.items.
Die Methode wird von allen modernen Browsern unterstützt. Ältere Internet-Explorer-Versionen kannten nur die Typen "Text" und "URL".

Siehe auch

DataTransfer DataTransfer.setData() DataTransfer.clearData() DataTransfer.types DataTransfer.files DataTransfer.items