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

Style des parties des valeurs des champs de saisie

Considération d'un scénario dans lequel un champ de saisie affiche du texte en rouge, mais une partie spécifique doit être distinguée avec la couleur bleue, cette enquête aborde la faisabilité de réaliser cet objectif stylistique effet.

Réponse :

Malheureusement, le style CSS s'applique uniformément à l'ensemble de l'élément d'entrée, empêchant la modification sélective d'une partie spécifique.

Solution :

Pour contourner cette limitation, une approche multi-éléments est nécessaire, divisant les champ de saisie en trois sections logiques :

• Avant le point d'édition (partie non modifiée)
• Au moment de l'édition (partie actuellement modifiée)
• Après le point d'édition (partie restante non éditée)

Cette division ne peut pas être réalisée via un seul élément d'entrée, nécessitant l'utilisation de JavaScript.

1. Marquage initial :
   Commencez avec un élément d'entrée standard sans style. JavaScript remplacera cet élément d'entrée par un élément conteneur stylisé conçu pour ressembler à un champ de saisie.
2. Emballage dynamique :
   Implémentez des gestionnaires d'événements JavaScript (par exemple, clic, touche enfoncée, touche supérieure) pour identifier les trois divisions. Enveloppez ces portions dans des éléments HTML appropriés (par exemple, ) et appliquez un style distinct si nécessaire.

Exemple de balisage :

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

Par Cette méthode, l'effet souhaité de style de parties spécifiques de la valeur du champ de saisie peut être obtenu tout en conservant l'accessibilité du champ de saisie.

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!