In diesem Artikel wird der Umgang mit den inhaltsbearbeitbaren Änderungsereignissen in JavaScript erläutert und anhand eines Beispiels erläutert.
Wie gehe ich mit inhaltsbearbeitbaren Änderungsereignissen in JavaScript um?
Das contenteditable ist ein Aufzählungsattribut. Der Benutzer kann den Inhalt entsprechend seinen Anforderungen ändern. Wenn dies zulässig ist, ändert der Browser sein Widget, um die Änderung der Elemente zu ermöglichen.
Welche Werte sind bei einem inhaltsbearbeitbaren Änderungsereignis zulässig?
Das contenteditable kann einen dieser Werte annehmen:
- Klartext bedeutet, dass der Originaltext bearbeitet werden kann, obwohl die Rich-Text-Formatierung deaktiviert ist.
- Eine leere Zeichenfolge oder true, was bedeutet, dass das Element bearbeitet werden kann.
- false bedeutet, dass das Element nicht bearbeitet werden kann.
Beispiel
Das folgende Beispiel erklärt, wie bearbeitbare Inhalte auf einer Webseite verwendet werden können. Schauen wir uns den folgenden Code an, um ihn besser zu verstehen:
HTML
Hier ist ein HTML-Code, der die Verwendung der inhaltsbearbeitbaren Änderungsereignisse erklärt:
< Blockquote inhaltsbearbeitbar = 'WAHR' >
< h3 > BEARBEITEN SIE IHREN INHALT HIER! < / h3 >
< / Blockquote >
Im obigen HTML-Code:
- Ein Blockquote-Tag wird erstellt, wobei das Attribut contenteditable auf true gesetzt ist. Dadurch kann der Inhalt im Blockquote-Tag bearbeitet werden.
- Im Blockquote-Tag ist ein h3-Tag vorhanden. Es heißt „HIER IHREN INHALT BEARBEITEN!“, da es im
vorhanden ist, was bedeutet, dass der Inhalt vom Benutzer bearbeitet werden kann.
CSS
Um unseren Code optisch ansprechend zu gestalten, haben wir folgenden CSS-Code verwendet:
Blockquote {
Hintergrund : Pfirsichpuff ;
Grenzradius : 10px ;
Marge : 10px ;
}
Blockquote h3 {
Polsterung : 10px ;
}
Im obigen CSS-Code:
- Der Hintergrund des Blockquote-Tags ist auf eine Pfirsichfarbe mit einem Randradius von 10 Pixel und einem Rand von 10 Pixel eingestellt.
- Die h3-Überschrift im Blockquote ist auf einen Abstand von 10 Pixel eingestellt.
Ausgabe :
Die folgende Ausgabe erklärt, wie der Inhalt mithilfe des contenteditable change-Ereignisses in JavaScript bearbeitet werden kann:
Bedeutung der Bearbeitung des Inhalts
- Erhöhte Interaktivität, da der Benutzer den Inhalt bequem ändern kann.
- Durch die bequeme Anpassung als Programmierer mit Hilfe von JavaScript können geänderte Verhaltensweisen wie das automatische Speichern erstellt werden, die je nach Benutzereingabe unterschiedliche Aktionen auslösen.
- Trägt dazu bei, den Bearbeitungsprozess zu optimieren, sodass der Benutzer dynamisch bearbeiten kann, ohne dass ein separates Textfeld erforderlich ist.
Abschluss
Die inhaltsbearbeitbaren Änderungsereignisse in JavaScript ermöglichen es dem Benutzer, den Inhalt zu ändern, wodurch die Webseite reaktionsfähig und anpassbar wird. Dies ebnet den Weg für eine benutzerzentrierte Webentwicklung, bei der ein Benutzer den Inhalt einer Webseite in Echtzeit bearbeiten kann, was eine reaktionsschnellere Benutzererfahrung ermöglicht. In diesem Artikel wurde der Umgang mit inhaltsbearbeitbaren Änderungsereignissen in JavaScript erläutert und anhand eines Beispiels erläutert.