Wie füge ich mithilfe von JavaScript Platzhalter zu einem inhaltsbearbeitbaren Div hinzu?

Der Platzhalter für ein inhaltsbearbeitbares Div wird bereitgestellt, um Vorschläge und visuelle Hinweise anzubieten und den Mehrdeutigkeitsfaktor zu reduzieren. Der Platzhalter kommuniziert konkret den beabsichtigten Zweck des „contenteditable“

-Elements. Die Benutzer können den ursprünglichen Text anhand des Platzhalters sehen und den einzugebenden Text verstehen.

In diesem Blog wird der Vorgang zum Einfügen eines Platzhalters für eine Contenteditable Div erläutert.

Wie füge ich mithilfe von JavaScript Platzhalter zu einem inhaltsbearbeitbaren Div hinzu?

Durch das Platzieren eines Platzhalters für ein inhaltsbearbeitbares HTML-Div-Element werden die Zugänglichkeit für Endbenutzer sowie zusätzlicher Kontext und Anweisungen zum Zweck dieses Elements stärker hervorgehoben. Der Entwickler kann auch Stile anwenden, um den Platzhalter klarer zu machen und den Fokus des Benutzers abzulenken. Es kann sowohl mit JavaScript als auch mit jQuery implementiert werden, wie in den folgenden Beispielen angegeben:

Methode 1: Verwendung von JavaScript

Die Verwendung benutzerdefinierter Funktionen durch den JavaScript EventListener spielt eine wichtige Rolle bei der Platzierung des Platzhalters für ein inhaltsbearbeitbares Div. Besuchen Sie zum Beispiel den Code:


#editable-div {
Rand: 1px fest #ccc;
Polsterung: 10px;
}
.placeholder {
Farbe: Grau;
Schriftstil: kursiv
}



document.addEventListener(„DOMContentLoaded“, function() {
var editableDiv = document.getElementById(„editable-div“);
var PlaceData = „Geben Sie hier Text ein…“;

// Platzhalter einfügen
Funktion insertPlaceholder() {
if (editableDiv.textContent.trim().length === 0) {
editableDiv.innerHTML = ‚‚ + PlaceData + ‚‚;
}
}
// Platzhalter ausblenden
Funktion hidePlaceholder() {
if (editableDiv.textContent.trim() === PlaceData) {
editableDiv.innerHTML = “;
}
}
editableDiv.addEventListener(„input“, insertPlaceholder);
editableDiv.addEventListener(„focus“, hidePlaceholder);
editableDiv.addEventListener(„blur“, insertPlaceholder);

//Überprüfen Sie, ob das Div leer ist
insertPlaceholder();
});

Erklärung des obigen Codes:

  • Erstellen Sie zunächst ein bearbeitbares Div und legen Sie den Wert von „ fest.inhaltsbearbeitbarAttribut als „WAHR”, um das Div „bearbeitbar“ zu machen.
  • Fügen Sie als Nächstes den Ereignis-Listener „DOMContentLoaded“ hinzu, der eine anonyme Funktion aufruft, die die Referenz des bearbeitbaren Div abruft und speichert.
  • Deklarieren und initialisieren Sie außerdem die Variable „PlaceData“ mit einer Dummy-Nachricht, die als Platzhalter festgelegt wird.
  • Es wird die Funktion „insertPlaceholder“ definiert, die ein „Wenn”-Anweisung, um zu prüfen, ob die Länge von „editableDiv“ gleich „0“. Fügen Sie das „Platzhalter”-Text innerhalb des div mithilfe des „innerHTML“ Eigentum.
  • Erstellen Sie nun eine weitere Funktion zum Ausblenden oder Entfernen des Platzhalters mit dem Namen „ausblendenPlatzhalter“. Es nutzt die „Wennbedingte Anweisung, um zu prüfen, ob die „editableDivDer Inhalt entspricht dem „placeholderText“.
  • Rufen Sie danach die Funktionen „insertPlaceholder()“ und „hidePlaceholder()“ auf, wenn das bearbeitbare Div ein Ereignis von „Eingang“ Und „Fokus“ jeweils. Rufen Sie außerdem die Funktion „insertPlaceholder()“ auf oder rufen Sie sie auf, um zu überprüfen, ob „editableDiv“ leer ist, um den Platzhalter einzufügen.
  • Am Ende kann das individuelle Styling auf der „editableDiv“ Und „Platzhalter”-Klassen zur Erhöhung des Sichtbarkeitsfaktors.

Nach der Kompilierung wird die Webseite wie folgt gerendert:

Die Ausgabe zeigt, dass der Platzhalter für das Contenteditable-Div hinzugefügt wurde.

Methode 2: Verwendung von jQuery

Mit Hilfe von jQuery kann das gleiche Ergebnis erzielt werden und es vereinfacht den Prozess der DOM-Manipulation und AJAX erheblich. Es ist effizienter und ermöglicht Entwicklern das einfache Schreiben von Code für JavaScript bei geringerem Zeit- und Arbeitsaufwand. Unten finden Sie die Demonstration für die Erstellung eines Platzhalters für ein inhaltsbearbeitbares Div mithilfe von jQuery:


$(document).ready(function() {
var $editableDiv = $(„#editable-div“);
var PlaceData = „Datum hier einfügen“;

// Platzhalter einfügen
Funktion insertPlaceholder() {
if ($editableDiv.text().trim().length === 0) {
$editableDiv.html(‚‚ + PlaceData + ‚‚);
}
}
// Platzhalter ausblenden oder löschen
Funktion hidePlaceholder() {
if ($editableDiv.text().trim() === PlaceData) {
$editableDiv.html(“);
}
}
$editableDiv.on(„input“, insertPlaceholder);
$editableDiv.on(„focus“, hidePlaceholder);
$editableDiv.on(„blur“, insertPlaceholder);

insertPlaceholder();
}
);

Erklärung zum obigen Code:

  • Erstellen Sie zunächst ein bearbeitbares Div, indem Sie „inhaltsbearbeitbar”-Attribut über ein „div“-Element und setzen Sie seine ID auf „editable-div“.
  • Als nächstes wird jQuery verwendet, um die Funktion aufzurufen, nachdem die Webseite ordnungsgemäß geladen wurde. Innerhalb der Funktion wird der Verweis auf das div in einer neuen Variablen mit dem Namen „ gespeichert.$editableDiv“ und die Dummy-Daten werden in eine „PlaceData“-Variable eingefügt.
  • Dann ist eine Funktion „insertPlaceholder()„wird verwendet, um die Länge des im „div“ verfügbaren Textes zu überprüfen. Wenn kein Inhalt vorhanden ist, wird das „PlaceDataAls Platzhalter wird darin eingefügt.
  • Danach definieren Sie eine weitere Funktion „hidePlaceholder()”, das prüft, ob Daten im div vorhanden sind, und dann den Platzhalter ausblendet, indem leere Anführungszeichen eingefügt werden.
  • Am Ende ist das „insertPlaceholder()“ Und „hidePlaceholder()„Funktionen werden entsprechend dem Auftreten des angegebenen Ereignishandlers verwendet, um einen dynamischen Effekt zu erzeugen.
  • Rufen Sie außerdem die „insertPlaceholder()” um festzustellen, ob das „div“-Element für den Platzhalter leer ist.

Nach der Beschreibung:

Die Ausgabe zeigt, dass mithilfe von jQuery ein Platzhalter zum Contenteditable Div hinzugefügt wurde.

Abschluss

Der Platzhalter kann zu einem Contenteditable-Div hinzugefügt werden, indem zuerst das

erstellt und dessen „inhaltsbearbeitbar“ zuschreiben „WAHR“. Verwenden Sie dann die „addEventListener()“, das die Funktionen aufruft, die den Ereignissen entsprechen, z. B. „Eingang“, „Fokus“ oder „verwischen“. Die Funktionen prüfen, ob das Div leer ist, sie zeigen den Platzhalter an und wenn das Div Daten enthält oder im Fokus ist, wird der Platzhalter ausgeblendet. In diesem Blog wurde der Vorgang zum Hinzufügen des Platzhalters zu einem Contenteditable-Div mithilfe von JavaScript und jQuery erläutert.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen