Legen Sie das contenteditable-Attribut fest, um den Inhalt von HTML-Tags zu bearbeiten (kann Textarea ersetzen)_HTML/Xhtml_Webseitenproduktion

Code kopieren

Der Code lautet wie folgt:

bearbeiten.

Wenn Sie contenteditable="true" zu BODY hinzufügen, können Sie sehen, wie magisch dieses Attribut ist. Daher können wir das Attribut contenteditable="true" auf das HTML-Tag setzen und das Tag kann bearbeitet werden.

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

In einigen Fällen können wir DIV verwenden, um die Eingabe oder den Textbereich zu ersetzen, um den gleichen Effekt zu erzielen. Wenn wir beispielsweise Ajax verwenden, können wir den Inhalt des DIV beim Absenden des Formulars abrufen.

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

Wie Div CSS die Anpassungsfähigkeit der Textbereichshöhe im Textbereich simuliert, um das Contenteditable-Attribut des HTML5-Standards zu erfüllen

Dieser Effekt wird hauptsächlich durch das Hinzufügen des contenteditable-Attributs in HTML5 zum Tag erreicht (contenteditable: gibt an, ob Benutzer Inhalte bearbeiten dürfen). Das Tolle ist, dass IE dieses Attribut auch unterstützt, sodass Sie sich auch keine Sorgen machen müssen viel über Kompatibilitätsprobleme.
DEMO:

Code kopieren

Der Code lautet wie folgt:

　

　

Anhang:

Wenn im FF-Browser der Container den Fokus erhält, entspricht die Höhe des Cursors der Höhe des Containers, oder der Cursor wird zu diesem Zeitpunkt nicht angezeigt, wenn ein Platzhalter vorhanden ist Standardmäßig zum Container hinzugefügt, z. B.
kann dieses Problem lösen.

Nun stellt Yuzi Ihnen eine weitere gute Methode vor, die bearbeitet werden kann und sich automatisch an die Höhe anpassen kann, ohne js hinzuzufügen Code. Lassen Sie alle ihre Augen öffnen. Sie können DIV direkt als Textfeld verwenden, ähnlich wie das TextArea-Textfeld. Noch wichtiger ist, dass die Benutzererfahrung von DIV perfekter und ansprechender ist.

Das contentEditable-Attribut in HTML kann den bearbeitbaren Status bestimmter Elemente aktivieren. Vielleicht haben Sie das contentEditable-Attribut noch nie verwendet oder sogar davon gehört. Die Rolle von contentEditable ist ziemlich magisch. Sie können Divs oder ganze Webseiten sowie Span- und andere Elemente beschreibbar machen. Unser am häufigsten verwendeter Eingabetextinhalt ist input und textarea. Nach Verwendung des contentEditable-Attributs können Sie Inhalte in div, table, p, span, body und vielen anderen Elementen eingeben. Insbesondere contentEditable wurde im HTML5-Standard effektiv unterstützt. Kommen Sie und erleben Sie es.

Ist das nach dem Setzen des contentEditable="true"-Attributs nicht ganz magisch? Haha...

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

Lassen Sie uns einen Spezialeffekt machen, indem wir die Bearbeitung von div-Elementen aktivieren. Unabhängig davon, ob wir Bilder einfügen können, ist hierfür die Verwendung von js erforderlich.

Code kopierenDer Code lautet wie folgt:

<script><br />function img (){<br />var location1 = prompt("Bitte geben Sie die Adresse des Bildes ein:","http://");<br />if(location1){<br />selImg(location1);<br />}<br />}<br />function selImg(s){<br />if(!s){return false;}<br />var h=s.substr(s.lastIndexOf(".") 1,3 );<br /> if(h=="gif"||h=="jpg" || h=="GIF" || h=="JPG"){<br />Edit=document.getElementById("idEdit ")<br />Edit.innerHTML ='<img src=' s ' alt="Legen Sie das contenteditable-Attribut fest, um den Inhalt von HTML-Tags zu bearbeiten (kann Textarea ersetzen)_HTML/Xhtml_Webseitenproduktion" >'<br />}<br />else{<br />}<br />}<br /></script>
< ;div NAME=EditStrg id=idEdit contentEditable=true style="max-width:90%"> Yuzi.me

Großartig, wenn Sie mehr Effekte verwenden möchten, müssen Sie selbst JS-Code schreiben. Ich hoffe, dass alle Belagerungshelden ihr Bestes geben und freue mich darauf, sie zu teilen!