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

Code kopieren

Der Code lautet wie folgt:

<div contenteditable="true">Sie können den Inhalt bearbeiten</div>

Wenn Sie contenteditable="true" zu BODY hinzufügen, können Sie herausfinden, wie magisch dieses Attribut ist. Daher können wir dem HTML-Tag das Attribut contenteditable="true" hinzufügen, um das Tag zu bearbeiten.

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:

Code kopieren

Der Code lautet wie folgt:

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   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.

Code kopieren

Der Code lautet wie folgt:

<Skript>
Funktion img(){
var location1 = prompt("Bitte geben Sie die Adresse des Bildes ein:","http://");
wenn(Standort1){
selImg(Standort1);
}
}
Funktion selImg(s){
wenn(!s){return false;}
var h=s.substr(s.lastIndexOf(".")+1,3);
wenn(h=="gif"||h=="jpg" || h=="GIF" || h=="JPG"){
Bearbeiten = document.getElementById("idEdit")
Bearbeiten.innerHTML+='<img src='+s+'>'
}
anders{
}
}
</Skript>
<div NAME=EditCtrl id=idEdit contentEditable=true style="width:100%;height:200px;border:1px solid #666666"> <b>Yuzi.me</b></div>
<input type="button" name="Senden" value="Bild einfügen" onclick="img()">

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!

<<: Die jQuery + Swiper-Komponente realisiert den Umschalteffekt der gleitenden Jahresregisterkarte in der Zeitleiste

>>: Studieren Sie die Verwendung von Zeichen anstelle von Bildern, um abgerundete oder scharfe Ecken zu erzielen

Lösung zur automatischen Beendigung von Docker Run-Containern

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

Lösung zur automatischen Beendigung von Docker Run-Containern

Detaillierte Erläuterung der Installations-, Konfigurations-, Start- und Herunterfahrmethoden des MySQL-Servers

Problemanalyse der Verwendung einer Idee zum Erstellen eines Springboot-Initialisiererservers

Wie stellt MySQL die Datenintegrität sicher?

Vue implementiert den Lupeneffekt beim Tab-Umschalten

Detaillierte Erläuterung der DOM-Stileinstellungen in vier Reaktionskomponenten

Ausführliches Installationstutorial für MySQL 8.0.12 winx64

So betten Sie mithilfe von Iframe andere Webseiten in eine Webseite ein

Tutorial zur MySQL-Installation unter Linux (Binärdistribution)

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.11 Zip

Artikel empfehlen

Mehrere Möglichkeiten zum Festlegen der Ablaufzeit von localStorage

Verwenden Sie Element+vue, um Start- und Endzeitlimits zu implementieren

Implementierung eines Tomcat-Images, das mit Dockerfile basierend auf Alpine erstellt wurde

Beispielcode zur Implementierung von Dreiecken und Pfeilen durch CSS-Rahmen

Ein ausführliches Tutorial zur Installation von Jenkins auf Docker für Anfänger

JavaScript-Kreisdiagrammbeispiel

Vue implementiert Countdown-Funktion

Analyse des Prinzips der MySQL-Indexlängenbeschränkung

Welche Ähnlichkeiten gibt es zwischen der Entwicklung des Webdesigns und der westlichen Architektur?

In diesem Artikel erfahren Sie mehr über NULL in MySQL

CSS3 erstellt 3D-Würfel-Ladeeffekte

Überlegungen zum Rasterdesign von Webseiten

MySQL Master-Slave-Replikationsprinzip und zu beachtende Punkte

Allgemeine Textverarbeitungsbefehle unter Linux und Vim-Texteditor

So verleihen Sie einer Website ein höheres und ansprechenderes Aussehen