Comment puis-je styliser des parties spécifiques de la valeur d'un champ de saisie ?

Style de parties spécifiques d'une valeur d'entrée

En ce qui concerne le style de parties spécifiques de la valeur d'un champ de saisie, il convient de noter que les styles s'appliquent intrinsèquement à un élément dans son intégralité. Cependant, pour obtenir l'effet souhaité, il faut une approche créative pour respecter les contraintes de balisage sémantique.

Présentation de la solution

La solution consiste à diviser le champ de saisie en fonction du point d'édition de l'utilisateur. en trois sections :

1. Texte avant le point d'édition
2. Texte modifiable à l'édition point
3. Texte après le point d'édition

Manipulation dynamique des éléments

Comme le point d'édition peut se déplacer, JavaScript devient nécessaire pour une solution dynamique . Dans un premier temps, remplacez l'élément d'entrée par un élément conteneur conçu pour imiter un champ de saisie. Ensuite, utilisez JavaScript pour envelopper les trois sections mentionnées ci-dessus dans des éléments séparés (par exemple, des étendues) et appliquez les couleurs souhaitées en conséquence.

Marquage généré

La structure HTML suivante pourrait servir de point de départ au balisage de remplacement généré dynamiquement :

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

Événement Gestion

Enfin, les événements click, keydown et keyup peuvent être utilisés pour identifier les trois divisions et les envelopper de manière appropriée. Cela garantit que le style reflète dynamiquement la saisie de l'utilisateur.

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!