Setzen Sie das Attribut „contenteditable“, um den Inhalt von HTML-Tags zu bearbeiten (kann Textarea ersetzen).

Das contenteditable-Attribut ist mit allen Browsern kompatibel (die Kompatibilität von Versionen vor IE6 wurde nicht getestet).

Manchmal können wir DIV anstelle von Eingabe oder Textbereich verwenden, um den gleichen Effekt zu erzielen. Wenn wir beispielsweise Ajax verwenden, können wir beim Senden des Formulars den Inhalt von DIV abrufen.

Aufmerksame Leute werden feststellen, dass das Textfeld zum Posten von Kommentaren im QQ-Bereich tatsächlich ein DIV und kein Textbereichstextfeld ist.

Wie simuliert Div+CSS die Höhenanpassung des Textfelds Textarea, um das contenteditable-Attribut des HTML5-Standards zu erreichen?

Dieser Effekt wird hauptsächlich dadurch erreicht, dass dem Tag in HTML5 das contenteditable-Attribut hinzugefügt wird (contenteditable: gibt an, ob der Benutzer den Inhalt bearbeiten darf). Das Tolle daran ist, dass der IE dieses Attribut ebenfalls unterstützt, sodass Sie sich nicht allzu viele Gedanken über Kompatibilitätsprobleme machen müssen.
DEMO:

Anhang:
Wenn im FF-Browser der Container den Fokus erhält, entspricht die Cursorhöhe der Containerhöhe oder der Cursor wird nicht angezeigt. Wenn Sie dem Container zu diesem Zeitpunkt standardmäßig einen Platzhalter wie <br/> oder &nbsp; hinzufügen, kann dieses Problem gelöst werden.

Jetzt stellt Ihnen Yuzi eine weitere gute Methode vor, die bearbeitet und automatisch an die Höhe angepasst werden kann, ohne dass JS-Code hinzugefügt werden muss. Lassen Sie alle ihre Augen öffnen. Yuzi kann DIV direkt als Textfeld verwenden, das dem TextArea-Textfeld ähnelt. Noch wichtiger ist, dass die Benutzererfahrung von DIV perfekter und cooler ist.

Das contentEditable-Attribut in HTML kann den bearbeitbaren Status bestimmter Elemente aktivieren. Vielleicht haben Sie das contentEditable-Attribut noch nie verwendet oder noch nie davon gehört, aber die Rolle von contentEditable ist ziemlich magisch. Sie können Div oder die gesamte Webseite sowie Span und andere Elemente beschreibbar machen. Die am häufigsten verwendeten Texteingabeelemente sind input und textarea. Nach Verwendung des contentEditable-Attributs können Sie Inhalte in div, table, p, span, body und viele andere Elemente eingeben. Insbesondere contentEditable wurde im HTML5-Standard effektiv unterstützt. Kommen Sie und erleben Sie es.

Ist es nicht ganz magisch, nachdem Sie das Attribut contentEditable="true" festgelegt haben? Ha ha…

DEMO-Seite: http://demo.jb51.net/js/2014/ContentEditable/

Lassen Sie uns einen Spezialeffekt erzielen. Können wir durch Öffnen der Div-Elementbearbeitung ein Bild einfügen? Dies erfordert die Verwendung von js.

Genial! Wenn Sie weitere Effekte verwenden möchten, müssen Sie selbst JS-Code schreiben. Ich hoffe, dass alle Belagerungshelden ihr Bestes geben können und freue mich darauf, es mit Ihnen zu teilen!