Champ de saisie de texte HTML avec le symbole monétaire

Je voudrais avoir un champ de saisie de texte contenant le signe “$” au tout début, et quelle que soit la modification apscope au champ, le signe doit être persistant.

Je serais bien si seulement les chiffres étaient acceptés pour la saisie, mais ce n’est qu’un ajout de fantaisie.

Envisagez de simuler un champ de saisie avec un préfixe ou un suffixe fixe en utilisant un intervalle avec une bordure autour d’un champ de saisie sans bordure. Voici un exemple de lancement de base:

.currencyinput { border: 1px inset #ccc; } .currencyinput input { border: 0; } 
 $ 

Utilisez un parent .input-icon div. Ajoutez éventuellement .input-icon-right .

 
$

Alignez l’icône verticalement avec transform et top , et définissez pointer-events sur none pour que les clics se concentrent sur l’entrée. Ajustez le padding et la width si nécessaire:

 .input-icon { position: relative; } .input-icon > i { position: absolute; display: block; transform: translate(0, -50%); top: 50%; pointer-events: none; width: 25px; text-align: center; font-style: normal; } .input-icon > input { padding-left: 25px; padding-right: 0; } .input-icon-right > i { right: 0; } .input-icon-right > input { padding-left: 0; padding-right: 25px; text-align: right; } 

Contrairement à la réponse acceptée, cette option conservera la mise en évidence de la validation des entrées, telle qu’une bordure rouge en cas d’erreur.

Exemple d’utilisation de JSFiddle avec Bootstrap et Font Awesome

Vous pouvez envelopper votre champ de saisie dans une plage que vous position:relative; . Ensuite, vous ajoutez avec :before content:"€" votre symbole monétaire et le position:absolute . JSFiddle de travail

HTML

    

CSS

 .input-symbol-euro { position: relative; } .input-symbol-euro input { padding-left:18px; } .input-symbol-euro:before { position: absolute; top: 0; content:"€"; left: 5px; } 

Mettre à jour Si vous souhaitez placer le symbole de l’euro à gauche ou à droite de la zone de texte. JSFiddle de travail

HTML

       

CSS

  .input-euro { position: relative; } .input-euro.left input { padding-left:18px; } .input-euro.right input { padding-right:18px; text-align:end; } .input-euro:before { position: absolute; top: 0; content:"€"; } .input-euro.left:before { left: 5px; } .input-euro.right:before { right: 5px; } 

Etant donné que vous ne pouvez pas faire ::before avec content: '$' sur les entrées et append un élément positionné de manière absolue, cela ajoute du code HTML supplémentaire – j’aime bien le faire en arrière-plan.

Ca fait plutot comme ca:

 input { width: 85px; background-image: url("data:image/svg+xml;utf8,$"); padding-left: 12px; } 

Il génère ce qui suit:

svg dollar sign background css

Remarque: le code doit être sur une seule ligne. Le support est plutôt bon dans les navigateurs modernes, mais assurez-vous de tester.

Placez le ‘$’ devant le champ de saisie du texte, au lieu de l’intérieur. Cela facilite grandement la validation des données numériques car vous n’avez pas à parsingr le “$” après la soumission.

Vous pouvez, avec JQuery.validate () (ou autre), append des règles de validation côté client qui gèrent la devise. Cela vous permettrait d’avoir le “$” dans le champ de saisie. Mais vous devez encore faire une validation côté serveur pour la sécurité et cela vous oblige à supprimer le ‘$’.

  $ 

Voir aussi: Restreindre l’entrée à la zone de texte: n’autorisant que les chiffres et les décimales

Si vous avez seulement besoin de supporter Safari, vous pouvez le faire comme ceci:

 input.currency:before { content: attr(data-symbol); float: left; color: #aaa; } 

et un champ de saisie comme

De cette façon, vous n’avez pas besoin d’une balise supplémentaire et conservez les informations de symbole dans le balisage.

Une autre solution que je préfère est d’utiliser un élément d’entrée supplémentaire pour une image du symbole monétaire. Voici un exemple d’utilisation d’une image d’une loupe dans un champ de texte de recherche:

html:

   

css:

 #search input[type="image"] { background-color: transparent; border: 0 none; margin-top: 10px; vertical-align: middle; margin: 5px 0 0 5px; position: absolute; } 

Cela se traduit par l’entrée dans la barre latérale gauche ici:

https://fsfe.org

Aucune de ces réponses n’est vraiment utile si vous souhaitez aligner la bordure gauche avec d’autres champs de texte sur un formulaire de saisie.

Je vous recommande de positionner le signe dollar à gauche à environ -10px ou à gauche 5px (selon que vous le voulez à l’intérieur ou à l’extérieur de la zone de saisie). La solution interne nécessite une direction: rtl sur le css d’entrée.

Vous pouvez également append un remplissage à l’entrée pour éviter la direction: rtl, mais cela modifiera la largeur du conteneur d’entrée pour ne pas correspondre aux autres conteneurs de même largeur.

 
$

ou

 
$

https://i.imgur.com/ajrU0T9.png

Exemple: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview

Pour bootstrap ses oeuvres

 $  

N’utilisez pas class = “form-control” dans le champ de saisie.

 .currencyinput { border: 1px inset #ccc; padding-bottom: 1px;//FOR IE & Chrome } .currencyinput input { border: 0; } 
 $ 

Oui, si vous utilisez bootstrap, cela fonctionnerait.

 .form-control input { border: none; padding-left: 4px; } 

et

 $