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. Code kopieren Der Code lautet wie folgt:<style type="text/css"> .demoEdit{border:1px solid #dddddd;width:450px;min- height:20px;_height:20px;outline:0px;padding:2px;} // outline:0px;Stillösung: Wenn der Container den Fokus erhält, zeigt der Container im FF-Browser den Effekt eines gepunkteten Rahmens an. .demoEdit p{margin:0px;padding:0px;} </Stil> <div contenteditable="true" style="border:1px solid #dddddd;width:360px;min-height:20px;_height:20px;outline:0px;"></div> <div contenteditable="true" class="demoEdit"></div> Anhang: 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… 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! |
Artikel empfehlen
Interpretation des Moduls zum Lastenausgleich mit nginx
Inhaltsverzeichnis Zwei Module zur Verwendung von...
Eine kurze Analyse der Übereinstimmungspriorität des Nginx-Konfigurationsspeicherorts
Vorwort Der Speicherort im Serverblock in der Ngi...
CSS3 implementiert fehlendes Eckrechteck, gefaltetes Eckrechteck und fehlenden Eckrand
Vorwort Vor ein paar Tagen bin ich zufällig auf d...
jQuery implementiert die Formularvalidierung
Verwenden Sie jQuery, um die Formularvalidierung ...
Detaillierte Erklärung des Flex-Layouts in CSS
Flex-Layout wird auch elastisches Layout genannt....
Detaillierte Erläuterung der flexiblen Verwendung des CSS-Rastersystems in Projekten
Vorwort CSS-Raster sind normalerweise in verschie...
Uniapp implementiert Beispielcode für die Anmeldung mit DingTalk-Scancode
Da Uniapp nicht über eine autorisierte DingTalk-A...
Verwenden Sie CSS, um zu verhindern, dass Lightbox die Anzeige des großen Bildcodes ohne Aktualisierung realisiert, wenn Sie auf ein kleines Bild klicken
Verwenden Sie CSS, um zu verhindern, dass Lightbo...
Detaillierte Erläuterung der asynchronen Axios-Kommunikation in Vue
1. Zuerst erstellen wir eine JSON-Datei zur inter...
Drei Möglichkeiten zum Sperren und Entsperren von Benutzerkonten in Linux
Wenn in Ihrer Organisation bereits eine Kennwortr...
Lösen Sie das Problem des Importierens von Webprojekten in Idea und deren Veröffentlichung in Tomcat
Idea importiert ein bestehendes Webprojekt und ve...
Zusammenfassung der 7 Protokolltypen in MySQL
In MySQL gibt es folgende Protokolldateien: 1: Pr...
So verwenden Sie die HTML 5 Drag & Drop-API in Vue
Die Drag & Drop-API fügt ziehbare Elemente zu...
Konfigurationslösung für die MySQL Dual-Master-Architektur (Master-Master)
In Unternehmen hat die hohe Verfügbarkeit von Dat...
So verwenden Sie einen Docker-Container für den Zugriff auf das Host-Netzwerk
Vor Kurzem wurde ein System bereitgestellt, das n...