Zone de saisie de texte HTML avec symbole de devise

j'aimerais avoir un champ d'entrée de texte contenant le signe " $ " au tout début, et peu importe ce que l'édition se produit dans le champ, pour que le signe soit persistant.

je serais bon si seulement les nombres étaient acceptés pour la saisie, mais c'est juste un ajout fantaisiste.

76
demandé sur halfer 2010-05-26 17:14:51

12 réponses

envisager de simuler un champ d'entrée avec un préfixe ou un suffixe fixe en utilisant une portée avec une bordure autour d'un champ d'entrée sans bordure. Voici un exemple de coup d'envoi de base:

.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>
83
répondu BalusC 2016-03-10 15:29:53

l'Utilisation d'un parent .input-icon div. Ajouter éventuellement .input-icon-right .

<div class="input-icon">
  <input type="text">
  <i>$</i>
</div>

<div class="input-icon input-icon-right">
  <input type="text">
  <i>€</i>
</div>

Alignez l'icône verticalement avec transform et top , et mettez pointer-events à none de sorte que les clics se concentrent sur l'entrée. Ajuster les chiffres padding et width selon le cas:

.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 conserve la mise en évidence de la validation des entrées, comme une bordure rouge lorsqu'il y a une erreur.

JSFiddle exemple d'utilisation avec Bootstrap et la Police Génial

40
répondu rybo111 2018-08-13 10:11:35

vous pouvez envelopper votre champ d'entrée dans une portée, que vous position:relative; . Puis vous ajoutez avec :before content:"€" votre symbole de devise et faites-le position:absolute . Ouvraison JSFiddle 1519110920"

HTML

<span class="input-symbol-euro">
    <input type="text" />
</span>

CSS

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

mise à Jour Si vous voulez mettre le symbole de l'euro, soit sur la gauche ou le côté droit de la zone de texte. Au Travail JSFiddle

HTML

<span class="input-euro left">
    <input type="text" />
</span>
<span class="input-euro right">
    <input type="text" />
</span>

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;
 }
25
répondu Philipp Hofmann 2015-11-08 10:59:02

puisque vous ne pouvez pas faire ::before avec content: '$' sur les entrées et en ajoutant un élément absolument positionné ajoute du html supplémentaire - j'aime faire à un SVG de fond css inline.

Il va quelque chose comme ceci:

input {
    width: 85px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='85px'><text x='2' y='13' fill='gray' font-size='12' font-family='arial'>$</text></svg>");
    padding-left: 12px;
}

produit ce qui suit:

svg dollar sign background css

Note: le code doit être inscrit sur une seule ligne. Soutien est assez bonne dans les navigateurs modernes, mais assurez-vous de tester.

13
répondu Jeff Callahan 2015-12-18 08:02:30

mettez le ' $ ' devant le champ d'entrée du texte, au lieu de l'intérieur. Cela rend la validation des données numériques beaucoup plus facile parce que vous n'avez pas à analyser le '$' après soumettre.

vous pouvez, avec JQuery.valider () (ou autre), ajouter quelques règles de validation côté client qui gèrent la monnaie. Cela vous permettrait d'avoir le '$' dans le champ d'entrée. Mais vous devez encore faire la validation côté serveur pour la sécurité et cela vous remet en la position de devoir supprimer le'$'.

3
répondu dnagirl 2010-05-26 13:22:02

si vous n'avez besoin que de Safari, vous pouvez le faire comme ceci:

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

et un champ d'entrée comme

<input class="currency" data-symbol="€" type="number" value="12.9">

de cette façon, vous n'avez pas besoin d'une étiquette supplémentaire et conservez les informations du symbole dans le markup.

2
répondu Sebastian 2014-10-27 20:43:39
1
répondu Quentin 2017-05-23 11:54:50

une Autre solution que je préfère, c'est d'utiliser un élément d'entrée pour une image du symbole de devise. Voici un exemple utilisant une image d'une loupe dans un champ de texte de recherche:

html:

<input type="image" alt="Subscribe" src="/graphics/icons/search-button.png">
<input type="text" placeholder="Search" name="query">

css:

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

il en résulte l'entrée sur la barre latérale gauche ici:

https://fsfe.org

0
répondu Sam Tuke 2012-01-19 17:07:15

aucune de ces réponses ne vous aide vraiment si vous êtes concerné par l'alignement de la frontière de gauche avec d'autres champs de texte sur un formulaire de saisie.

je recommande de placer le signe dollar absolument à gauche environ-10px ou à gauche 5px (selon que vous le voulez à l'intérieur ou à l'extérieur de la boîte de saisie). La solution interne nécessite direction: rtl sur le CSS d'entrée.

vous pouvez également ajouter du rembourrage à l'entrée pour éviter la direction:rtl, mais cela va modifier la largeur du conteneur d'entrée pour ne pas correspondre aux autres conteneurs de la même largeur.

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:-10px;">$</div>
 </div>
 <input type='text' />
</div>

ou

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:5px;">$</div>
 </div>
 <input type='text' style='direction: rtl;' />
</div>

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

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

0
répondu Ted Scheckler 2018-05-23 15:19:15

pour bootstrap ses oeuvres

<span class="form-control">$ <input type="text"/></span>

N'utilisez pas class=" form-control " dans le champ d'entrée.

-1
répondu Jestin 2016-06-14 12:09:24

.currencyinput {
    border: 1px inset #ccc;
    padding-bottom: 1px;//FOR IE & Chrome
}
.currencyinput input {
    border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>
-1
répondu Christian Bocaz 2016-10-19 20:30:58

Oui, si vous utilisez bootstrap, cela fonctionnerait.

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

et

<span class="form-control">$ <input type="text"/></span>
-1
répondu Johnson Carneiro 2018-09-04 14:41:08