Was sind die Nachteile der Verwendung eines contentEditable div anstelle eines Textbereichs?

Würde ich mir selbst in den Fuß schießen, indem ich ein div mit Attribut verwende contentEditable="true" als Textfeld und nicht als Textbereich?

Es würde gut funktionieren, aber es wäre ein bisschen schwieriger als ein Formular, einfach weil Sie Ihre eigene Logik verdrahten müssen, damit das Klickereignis der Schaltfläche das richtige div aufspürt, seinen Inhalt erhält und Führen Sie dann die Einreichung durch. Der Vorteil eines Textbereichs ist, dass der Browser all das für Sie erledigt.

Es ist nicht dasselbe. Semantisch gesehen ist der Zweck eines Textbereichs das Schreiben/Bearbeiten von Klartext, während Sie mit contentEditable beispielsweise eine Liste bearbeiten können (siehe: HTML-Demo) Zweitens ist das Verhalten auch anders. Wenn Sie beispielsweise in Chrome den folgenden Link testen und den gesamten Inhalt löschen, verlieren Sie den Fokus (das div-Element verschwindet), was nicht das erwartete Verhalten ist, oder wenn es ein Idiot ist.

Das GmailDas E-Mail-Bearbeitungsfeld von ist ebenfalls eine div mit contenteditable="true". Der große Vorteil ist, dass es hat automatische Anpassung Höhe als vom Benutzer eingegebener Text/Inhalt. Auch es unterstützt reichhaltiger Text Innerhalb. Sie können das nachahmen Textarea indem Sie bei Bedarf eine maximale Höhe festlegen.

Auf der anderen Seite, wenn Sie die automatische Höhe eingeben möchten Textareamüssen Sie möglicherweise js verwenden, um einen Listener an die zu binden oninput Haken.

Im divs mit contenteditable="true" der inhalt kann html-formatiert sein, zB text mit unterschiedlichen farben. Siehe auch https://stackoverflow.com/a/40898337/11769765.