Signatur
Beschreibung
Die Eigenschaft cols des Interfaces HTMLTextAreaElement ist eine positive Ganzzahl. Sie gibt an, wie breit ein mehrzeiliges Textfeld sichtbar ist, gemessen in durchschnittlichen Zeichenbreiten der verwendeten Schrift. Die Eigenschaft ist direkt mit dem HTML-Attribut cols verknüpft: Wer die Eigenschaft liest, erhält den Attributwert. Wer sie setzt, ändert das Attribut.
Fehlt das Attribut oder ist sein Wert ungültig (zum Beispiel 0, negativ oder keine Zahl), liefert cols den Standardwert 20. Auch beim Setzen gilt: Werte außerhalb des Bereichs 1 bis 2147483647 werden stillschweigend durch 20 ersetzt. Eine Ausnahme wird dabei nicht ausgelöst.
Praktisch ist cols vor allem in drei Fällen: wenn sich die Breite an den Inhalt anpassen soll (etwa bei Code- oder Log-Anzeigen mit fester Zeilenlänge), wenn Formulare dynamisch erzeugt werden, und zusammen mit wrap="hard". Bei wrap="hard" bestimmt cols, an welcher Stelle der Browser beim Absenden echte Zeilenumbrüche in den übermittelten Wert einfügt.
Für das eigentliche Layout ist CSS meist die bessere Wahl. Eine CSS-Regel für width (oder inline-size) hat Vorrang vor cols. Das Attribut bestimmt dann nur noch die Ausgangsgröße, also die natürliche Größe ohne CSS-Vorgaben.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | number | 20 | Nur beim Setzen: neue Breite in Zeichen. Der Wert wird in eine vorzeichenlose Ganzzahl (unsigned long) umgewandelt. Werte außerhalb von 1–2147483647 werden durch 20 ersetzt. |
Rückgabewert
20 zurückgegeben.Beispiele
Breite lesen und setzen
// HTML: <textarea id="kommentar"></textarea>
const textarea = document.querySelector('#kommentar');
console.log(textarea.cols); // Standardwert, weil kein Attribut gesetzt ist
textarea.cols = 60;
console.log(textarea.cols);
console.log(textarea.getAttribute('cols')); // das Attribut wird mitgeändertUngültige Werte fallen auf 20 zurück
const ta = document.createElement('textarea');
ta.cols = 0;
console.log(ta.cols);
ta.cols = -5; // wird zu 4294967295 umgewandelt, liegt außerhalb des Bereichs
console.log(ta.cols);
ta.setAttribute('cols', 'abc');
console.log(ta.cols);Breite an die längste Zeile anpassen
const logAusgabe = document.createElement('textarea');
logAusgabe.readOnly = true;
logAusgabe.value = [
'[INFO] Server gestartet',
'[WARN] Konfiguration unvollständig, verwende Standardwerte',
'[INFO] Bereit'
].join('\n');
const zeilen = logAusgabe.value.split('\n');
const laengste = Math.max(...zeilen.map((z) => z.length));
// Zwischen 20 und 120 Zeichen begrenzen
logAusgabe.cols = Math.min(Math.max(laengste, 20), 120);
logAusgabe.rows = zeilen.length;
document.body.append(logAusgabe);
console.log(logAusgabe.cols);Harte Zeilenumbrüche beim Absenden mit wrap="hard"
const form = document.createElement('form');
const ta = document.createElement('textarea');
ta.name = 'nachricht';
ta.wrap = 'hard'; // Umbrüche werden beim Absenden in den Wert übernommen
ta.cols = 40; // ohne cols hat wrap="hard" keine Wirkung
form.append(ta);
document.body.append(form);
console.log(`Umbruch nach ${ta.cols} Zeichen beim Absenden`);// Wichtig · Fallstricke
- CSS hat Vorrang: Ist per CSS eine
widthgesetzt, ändertcolsdie sichtbare Breite nicht mehr. Auch wenn der Nutzer das Feld überresizevergrößert oder verkleinert, bleibtcolsunverändert. Die Eigenschaft sagt also nichts über die tatsächliche Pixelbreite aus. Dafür eignen sichoffsetWidthodergetBoundingClientRect(). - Nur ungefähr: Die „durchschnittliche Zeichenbreite“ hängt von der Schrift ab. Bei Proportionalschriften passen je nach Text mehr oder weniger Zeichen in eine Zeile. Genau sind die Angaben nur mit einer Festbreitenschrift (
font-family: monospace). - Kein Fehler bei ungültigen Werten:
0, negative Zahlen oderNaNführen nicht zu einer Ausnahme, sondern ergeben den Standardwert 20. Das ist anders als bei vielen anderen Zahl-Eigenschaften, die dann einenIndexSizeErrorauslösen. colsbegrenzt nicht die Länge der Eingabe. Dafür gibt esmaxLength.- Die Eigenschaft wird von allen Browsern seit jeher unterstützt.