Automatisch wachsende Eingabefelder & Textbereiche

Standardmäßig ändern <input>- und <textarea>-Elemente ihre Größe nicht basierend auf ihrem Inhalt. Tatsächlich gibt es keine einfache HTML- oder CSS-Methode, um dies zu erreichen. Ziemlich lustig, da dies ein sinnvoller Anwendungsfall zu sein scheint. Aber natürlich gibt es Wege, mein Freund. Es gibt immer Wege.

Ich dachte darüber nach, nachdem Remy Sharp kürzlich darüber gebloggt hat, im Kontext von Inline-<input>-Elementen.

Nicht-Input-Elemente dehnen sich natürlich aus

Es ist seltsam für mich, dass es keine Möglichkeit gibt, ein Eingabeelement dazu zu zwingen, dieses Verhalten nachzuahmen, aber leider.

Wir können jedes Element mit dem Attribut contenteditable editierbar und eingabeähnlich machen

<span 
  class="input" 
  role="textbox" 
  contenteditable>
    99
</span>

Dieses <span> wird sich natürlich auf die Breite ausdehnen, die es für seinen Inhalt benötigt. Wenn es sich um ein <div> oder ein anderes Block-Element handeln würde, würde es sich auch vertikal nach Bedarf ausdehnen.

Aber sind Nicht-Input-Elemente zugänglich?

Ich bin mir nicht ganz sicher. Beachten Sie, dass ich role="textbox" auf das Element gesetzt habe. Das ist nur eine Best-Guess basierend auf einigen Dokumenten.

Selbst wenn das hilfreich ist...

1. Was ist mit der Tatsache, dass Formulare mit der Enter-Taste abgeschickt werden können?
2. Was ist mit der Idee, dass Formulardaten oft serialisiert und gesendet werden, während der Code, der das tut, wahrscheinlich nicht nach einem Span sucht?
3. Wird es für einen Screenreader tatsächlich genauso gelesen wie ein Eingabefeld?
4. Welche anderen Dinge¹ tun Eingabefelder natürlich, an die ich nicht denke?

So sehr ich von der Idee angetan bin, dass wir automatische Größenanpassung kostenlos vom Browser erhalten können, indem wir Nicht-Input-Elemente verwenden, so sehr mache ich mir auch ein wenig Sorgen über das (für mich) unbekannte Usability- und Zugänglichkeitsrisiko.

Größenanpassung tatsächlicher Eingabeelemente

Nehmen wir also an, wir bleiben bei <input> und <textarea>. Können wir sie größenveränderlich machen, obwohl das nicht besonders natürlich ist?

Eine Idee, die ich hatte, ist, die Eingabe in ein relatives Inline-Elternteil zu wickeln und es darin absolut zu positionieren. Dann könnten wir mit JavaScript den Wert der Eingabe mit einem versteckten Span innerhalb dieses Wrappers synchronisieren, wodurch die Breite nach Bedarf erhöht wird.

Für Textbereiche ist eine klassische Technik die Anzahl der Zeilenumbrüche zu zählen, diese zu verwenden, um die Höhe festzulegen, und sie dann mit der Zeilenhöhe zu multiplizieren. Das funktioniert gut für vorformatierte Texte, wie Code, aber überhaupt nicht für lange, absatzähnliche Inhalte.

Hier sind all diese Ideen kombiniert.

Weitere Ideen

Shaw hat eine kleine Einzeiler-JavaScript-Lösung, die *sehr clever* ist. Das JavaScript setzt ein data-*-Attribut auf das Element, das dem Wert des Eingabefeldes entspricht. Das Eingabefeld ist in einem CSS-Grid platziert, wobei dieses Grid ein Pseudo-Element ist, das dieses data-*-Attribut als Inhalt verwendet. Dieser Inhalt dehnt das Grid auf die entsprechende Größe basierend auf dem Eingabewert aus.

Eure Ideen

Ich weiß absolut, dass ihr anderen Web-Nerds das schon hunderttausendfach gelöst habt. Lasst sie uns in den Kommentaren sehen.