Wie kann ich bestimmte Teile eines Eingabefeldwerts mit JavaScript formatieren?

Styling bestimmter Teile von Eingabefeldwerten

Innerhalb eines In diesem Bereich kann es schwierig sein, den Stil bestimmter Teile der Benutzereingabe zu ändern. Da Stile im Allgemeinen für das gesamte Element gelten, ist dies nicht direkt erreichbar.

JavaScript-basierte Lösung

Um diese Einschränkung zu umgehen, kann ein JavaScript-basierter Ansatz verwendet werden. Ersetzen Sie das Feld Element mit einem Containerelement wie einem <div> und gestalten Sie es so, dass es einem Eingabefeld ähnelt.

Aufteilung des Eingabefelds

Identifizieren Sie bei der Eingabe durch den Benutzer die drei Abschnitte des Felds:

• Vor den Änderungen (nicht bearbeitet)
• Zum Zeitpunkt der Änderungen (bearbeitet)
• Nach den Änderungen (nicht bearbeitet)

Verpacken Sie diese Unterteilungen in separate Elemente wie . Beispiel-Markup:

<div>

Ereignisbehandlung und Stilanpassung

Verwenden Sie Click-, Keydown- und Keyup-Ereignisse, um die drei Unterteilungen dynamisch zu identifizieren. Wenden Sie nach Bedarf Styling auf diese Bereiche an, um den gewünschten Effekt zu erzielen.

Beispiel-HTML:

<div class="input">

JavaScript zum Ersetzen der Eingabe:

let input = document.getElementById("fakeInput");
let originalInput = document.querySelector("input");
input.replaceWith(originalInput);

Ereignisbehandlung und -spanne Zusatz:

originalInput.addEventListener("input", (e) => {
  let before = originalInput.value.substring(0, e.target.selectionStart);
  let edited = originalInput.value.substring(e.target.selectionStart, e.target.selectionEnd);
  let after = originalInput.value.substring(e.target.selectionEnd);

  let nonEditedBefore = document.createElement("span");
  nonEditedBefore.className = "nonEdited before";
  nonEditedBefore.textContent = before;

  let editedSpan = document.createElement("span");
  editedSpan.className = "edited";
  editedSpan.textContent = edited;

  let nonEditedAfter = document.createElement("span");
  nonEditedAfter.className = "nonEdited after";
  nonEditedAfter.textContent = after;

  input.appendChild(nonEditedBefore);
  input.appendChild(editedSpan);
  input.appendChild(nonEditedAfter);
});

Das obige ist der detaillierte Inhalt vonWie kann ich bestimmte Teile eines Eingabefeldwerts mit JavaScript formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!