Pouvez-vous styliser certaines parties du texte d'un champ de saisie ?

Style des parties d'un champ de saisie

Question :

Est-il possible d'appliquer différents styles à des segments spécifiques de la valeur d'un champ de saisie lorsque l'utilisateur entre texte ?

Réponse :

Malheureusement, les styles ne peuvent pas être appliqués de manière sélective à des parties d'un champ de saisie.

Solution de contournement :

Pour obtenir l'effet souhaité, une solution impliquant plusieurs éléments est nécessaire.

Approche :

1. Division des éléments :

   • Diviser le champ de saisie en trois sections en fonction de l'insertion point :

     • Avant : Texte saisi précédemment
     • Modifié : Texte en cours de saisie
     • Après : Texte saisi après l'insertion point

2. Génération de balisage :

   • Remplacez l'élément d'entrée par un élément conteneur qui ressemble un champ de saisie.
   • Divisez la valeur de saisie d'origine en trois sections mentionnées ci-dessus.
   • Enveloppez chaque section dans des éléments individuels (par exemple, des travées).

3. Gestion des événements :

   • Surveillez les entrées de l'utilisateur à l'aide d'écouteurs d'événements (par exemple, clic, appui sur la touche, keyup).
   • Utilisez ces événements pour identifier les trois sections de la valeur d'entrée.
   • Mettez à jour les styles d'éléments en fonction de la section modifiée.

Exemple de balisage :

<div class="input">
  <span class="nonEdited before">foo</span>
  <span class="edited">fizz</span>
  <span class="nonEdited after">bar</span>
</div>

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!