HTMLTextAreaElement.dirName — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.dirName

Beschreibung

Die Eigenschaft dirName eines <textarea>-Elements spiegelt das HTML-Attribut dirname. Die Kurzbeschreibung „gibt die Richtung des Elements an“ ist ungenau: dirName enthält nicht die Richtung selbst, sondern den Namen eines zusätzlichen Formularfelds. Beim Absenden des Formulars schickt der Browser unter diesem Namen die Schreibrichtung des eingegebenen Textes mit, also ltr (links nach rechts) oder rtl (rechts nach links).

Das ist vor allem bei mehrsprachigen Anwendungen nützlich, etwa bei Kommentaren oder Nachrichten, die auf Arabisch, Hebräisch oder Persisch geschrieben werden können. Der Server erfährt so, in welcher Richtung der Text eingegeben wurde, und kann ihn später korrekt anzeigen, z. B. mit dir="rtl". Am sinnvollsten ist das zusammen mit dir="auto": Dann ermittelt der Browser die Richtung anhand des ersten starken Schriftzeichens im Text.

Die Eigenschaft ist ein einfacher string. Fehlt das Attribut, ist der Wert eine leere Zeichenkette, und es wird kein zusätzliches Feld gesendet. Wenn Sie die Eigenschaft setzen, wird das Attribut dirname im DOM direkt aktualisiert.

Rückgabewert

Typ

string

Beschreibung

Der Wert des Attributs dirname, also der Feldname, unter dem die Schreibrichtung gesendet wird. Leere Zeichenkette, wenn das Attribut nicht gesetzt ist.

Beispiele

dirName lesen und setzen

// HTML: <textarea id="kommentar" name="kommentar" dir="auto"></textarea>
const textarea = document.getElementById('kommentar');

console.log(JSON.stringify(textarea.dirName)); // noch kein Attribut gesetzt

textarea.dirName = 'kommentar.dir';
console.log(textarea.dirName);
console.log(textarea.getAttribute('dirname'));

"" kommentar.dir kommentar.dir

Schreibrichtung über FormData mitsenden

// HTML:
// <form id="form">
//   <textarea name="nachricht" dir="auto" dirname="nachricht.dir"></textarea>
// </form>
const form = document.getElementById('form');
const textarea = form.elements.nachricht;

textarea.value = 'مرحبا بالعالم'; // arabischer Text

const daten = new FormData(form);
for (const [schluessel, wert] of daten) {
  console.log(`${schluessel} = ${wert}`);
}

nachricht = مرحبا بالعالم nachricht.dir = rtl

Richtung beim Senden per fetch an den Server übermitteln

const form = document.querySelector('#kommentar-form');
const feld = form.querySelector('textarea');

// dirname dynamisch vergeben, passend zum Feldnamen
feld.dir = 'auto';
feld.dirName = `${feld.name}.dir`;

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const daten = new FormData(form);
  console.log('Richtung:', daten.get(feld.dirName));
  await fetch('/api/kommentare', { method: 'POST', body: daten });
});

Richtung: ltr

// Wichtig · Fallstricke

Verwechslungsgefahr: dirName ist nicht die Schreibrichtung selbst. Die Richtung steht in dir (HTML-Attribut) bzw. HTMLElement.dir. dirName ist nur der Name des Felds, unter dem die Richtung gesendet wird.
Ohne dir="auto" wird meist die geerbte Richtung gesendet (in der Regel ltr), unabhängig vom eingegebenen Text.
Das zusätzliche Feld wird nur gesendet, wenn dirname nicht leer ist. Deaktivierte Felder (disabled) werden gar nicht gesendet, auch ihre Richtung nicht.
Serverseitig sollten Sie den Wert prüfen und nur ltr oder rtl akzeptieren, denn Clients können beliebige Werte schicken.
Kompatibilität: Chromium und Safari unterstützen das Attribut schon lange, Firefox erst ab Version 116. Seit 2023 ist es in allen aktuellen Browsern verfügbar (Baseline).

Siehe auch

HTMLAreaElement.pathname HTMLOutputElement.name HTMLTextAreaElement.name HTMLTextAreaElement.disabled HTMLTextAreaElement.form