web-dev-qa-db-fra.com

Est-il possible de styliser une partie de la valeur d'un champ de saisie?

Je travaille avec un champ <input> et j'aimerais styler une partie du champ de manière à ce que l'utilisateur saisisse une couleur différente. Par exemple, supposons que le <input> ait une déclaration de style de color: red; et que je veuille en changer part / en color: blue;. Est-il possible que ce soit possible?

S'il n'y en a pas (comme je le soupçonne), des idées créatives sur la façon dont je peux simuler cet effet tout en préservant le balisage sémantique?

htmlcssformsinput
30
Josh Leitzel

Vos soupçons sont corrects: les styles ne s’appliqueront qu’à l’entrée entière.

Comme les styles ne peuvent s’appliquer qu’à la totalité d’un élément, une solution nécessite au moins un élément par couleur requise.

Considérez la division du champ de saisie par rapport au point auquel l'utilisateur apporte des modifications. Il y a trois sections dans l'entrée:

  • qu'avant le moment où les changements sont appliqués
  • qu'après le point d'application des modifications
  • qu'au point où les changements sont appliqués

Vous ne pouvez pas y parvenir avec un seul élément d'entrée. Et comme le point auquel les modifications sont appliquées peut changer, les parties de la "saisie" encapsulées par les trois éléments changeront également. JavaScript est requis pour une solution.

Vous devez initialement inclure un élément d’entrée régulier et renoncer à toute coloration requise. Utilisez JavaScript pour remplacer l'entrée par un élément de conteneur approprié. Cela peut être stylé pour imiter un élément d’entrée.

Lorsque des modifications se produisent, utilisez JavaScript pour identifier les trois divisions susmentionnées. Enveloppez-les dans des éléments appropriés (des portées seraient idéales) et colorez au besoin.

Considérez le point de départ suivant pour le marquage de remplacement généré:

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

Utilisez les événements click, keydown et keyup pour déterminer les trois divisions de l'entrée et pour appliquer les trois parties de l'entrée falsifiée, si nécessaire.

11
Jon Cram

Comme d'autres l'ont déjà dit, vous ne pouvez pas le faire avec des styles et du balisage statique.

Vous pourriez probablement le faire avec un formulaire basé sur Flash.

Mais si je devais le faire, j'utiliserais jQuery pour superposer des divs, avec le texte colorisé, au-dessus du <input>.

Algorithme:

  1. Utilisez un <input> normal avec les styles par défaut souhaités. Le contenu de cette entrée ne changera jamais que par une action de l'utilisateur.

  2. jQuery surveille ce <input>. Lorsqu'il détecte un ou plusieurs mots déclencheurs, il ajoute un <div> après la saisie et le remplit avec le ou les mots déclencheurs, stylés à votre guise. Probablement un <div> par mot ou expression est le meilleur.

  3. jQuery place ensuite le nouveau <div>, absolument, directement sur le ou les mots déclencheurs.
    Obtenir le déclencheur Les mots décalés dans le <input> pourraient même ne pas être nécessaires, car les mots précédents pourraient également se trouver dans la superposition <div> - stylisée par défaut ou avec visibility: hidden.
    Toutefois, si seuls les mots de déclenchement sont souhaités dans la superposition, l’utilisation d’une police à largeur fixe, comme Courier, facilitera le sous-positionnement.

  4. Veillez à ce que l’incrustation n’interfère pas lorsque l’utilisateur essaie de faire glisser la souris sur certaines parties du <input>. Internet Explorer, ne souhaitez probablement pas couvrir plus de <input> que nécessaire et définir un gestionnaire click () pour relayer le focus.

Approche alternative, conviviale et simple:

Plutôt que d'essayer de faire des choses géniales, non attendues par les utilisateurs, prenez une page de Jakob Nielsen et de sites comme StackOverflow.

Ayez juste un ancien <input>, mais en dessous, affichez le texte formaté au fur et à mesure de son arrivée. 

5
Brock Adams

Vous pouvez conserver des divs de style différent côte à côte dans un conteneur recouvert par une entrée transparente. Modifiez les largeurs des divs stylées en fonction de votre entrée.

Par exemple, pour colorer l’arrière-plan de saisie des espaces de début et de fin:

<div class="bckg-container">
  <div id="bckg-leading" class="bckg spaces">
  </div>
  <div id="bckg-middle" class="bckg">
  </div>
  <div id="bckg-trailing" class="bckg spaces">
  </div>
  <br style="clear: left;" />
</div>
<input id="inpt" type="text" placeholder="Add leading/trailing spaces" maxlength="20" />

Les trois div à l'intérieur du conteneur changeront de largeur avec le changement d'entrée. 

Consultez l'exemple de travail dans jsfiddle http://jsfiddle.net/TalhaAwan/ywyw4qq5/

3
Talha Awan

Vous pouvez y parvenir avec (beaucoup d'effort et) un div avec l'attribut contentEditable présent. C’est ainsi que la plupart des éditeurs WYSIWYG basés sur le Web atteignent un formatage riche en entrées. Voir ici pour plus d’informations: http://ajaxian.com/archives/on-browser-wysiwyg

3
Mike Sherov

Vous pourrez peut-être le faire avec du javascript édité à la place (si ce n'est pas possible en html/css pur):

http://www.appelsiini.net/projects/jeditable/default.html

Ce plugin jQuery n'utilise pas de champs de saisie HTML, il est donc possible de styliser différentes parties de l'entrée. Il y a deux crochets pour les rappels que vous pouvez utiliser pour styler l'entrée. J'espère que cela aide comme une idée.

1
Mark Pope

Vous pouvez avoir une étiquette qui se moque de cette entrée et la vraie entrée à masquer, puis vous pouvez faire beaucoup de choses entre différentes étiquettes (par exemple des plages colorées).

0
Botea Florin