"resize: None;" Bei Textareas Ist Schlechte UX

Catalin Rosu:

Manchmal muss man eine lange Antwort mit vielen Absätzen tippen, und das Einwickeln dieses Textes in ein winziges Textarea-Feld macht es schwer, ihn zu verstehen und beim Tippen zu verfolgen. Es gab viele Male, da musste ich diesen Text zum Beispiel in Notepad++ schreiben und dann die gesamte Antwort in dieses kleine Textarea einfügen. Ich gebe zu, ich habe auch die DevTools geöffnet, um die Deklaration resize: none zu überschreiben, aber das ist keine wirklich produktive Arbeitsweise.

Das Entfernen der standardmäßigen Größenänderbarkeit eines <textarea> ist generell benutzerfeindliche Eitelkeit. Selbst wenn die geänderte Textarea das Layout der Website „zerstört“, Pech gehabt, der Benutzer versucht gerade, etwas sehr Wichtiges auf dieser Website zu tun, und nichts sollte ihn davon abhalten. Ich weiß, das Web ist ein großer Ort, also fühlen Sie sich frei, mich in den Kommentaren zu widerlegen.

Das muss für Catalin kathartisch gewesen sein, der sich auf Stack Overflow einen Namen gemacht hat mit einer Antwort zur Verhinderung der Größenänderung von Textareas vor fast einem Jahrzehnt.

Direkter Link →

Kommentare

Alex McCabe

# 31. Januar 2020

Ich stimme zu, dass „none“ schlecht ist, aber ich denke, resize: vertical ist absolut in Ordnung. Es erlaubt die Größenänderung, ohne das Design auf seltsame und unerwartete Weise zu zerstören (theoretisch).

Was sind deine Gedanken zu automatisch wachsenden Eingabefeldern?

Wisani

# 31. Januar 2020

Hängt davon ab, was du baust. Ich denke, gute Textareas haben eine Größe, die zu ihrem Zeichenlimit passt.

Mark Praschan

# 31. Januar 2020

Warum lassen wir Benutzer nicht die Größe ändern, wenn sie mehr Platz benötigen, aber indem wir dafür planen, können wir dafür sorgen, dass die Dinge gut aussehen. Hier ist mein Ansatz: https://codepen.io/markpraschan/pen/BaygPdV?editors=1100

Jelle

# 4. Februar 2020

Ich gebe zu, ich benutze resize: none gelegentlich, aber immer in Kombination mit JavaScript, das das Textarea länger macht, wenn der Text nicht mehr passt.

document.addEventListener("DOMContentLoaded", function(event) {
  function OnInput() {
    this.style.height = "auto";
    this.style.height = (this.scrollHeight) + "px";
  }
  var tx = document.getElementsByTagName("textarea");
  for (var i = 0; i < tx.length; i++) {
    tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
    tx[i].addEventListener("input", OnInput, false);
  }
});

Auf eine gewisse Weise finde ich das ein bisschen besser, als wenn der Benutzer es manuell tun muss.

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.