Comment puis-je styliser des parties spécifiques d'une valeur de champ de saisie à l'aide de JavaScript ?

Style de parties spécifiques des valeurs des champs de saisie

Dans un champ, changer le style de parties spécifiques de la saisie de l'utilisateur peut s'avérer difficile. Étant donné que les styles s'appliquent généralement à l'élément entier, cela n'est pas directement réalisable.

Solution basée sur JavaScript

Pour contourner cette limitation, une approche basée sur JavaScript peut être utilisée. Remplacez le avec un élément conteneur tel qu'un <div> et stylisez-le pour qu'il ressemble à un champ de saisie.

Division du champ de saisie

Lorsque l'utilisateur tape, identifiez les trois sections du champ :

• Avant les modifications (non édité)
• Au point de modifications (édité)
• Après les modifications (non édité)

Enveloppez ces divisions dans des éléments séparés comme . Exemple de balisage :

<div>

Gestion des événements et ajustement du style

Utilisez les événements Click, Keydown et Keyup pour identifier les trois divisions de manière dynamique. Appliquez un style à ces étendues si nécessaire pour obtenir l'effet souhaité.

Exemple HTML :

<div class="input">

JavaScript pour remplacer l'entrée :

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

Gestion et durée des événements Ajout :

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);
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!