Champ de saisie de texte HTML avec symbole monétaire


104

J'aimerais avoir un champ de saisie de texte contenant le signe "$" au tout début, et quelle que soit la modification apportée au champ, pour que le signe soit persistant.

Je serais bien si seuls les chiffres étaient acceptés pour l'entrée, mais ce n'est qu'un ajout sophistiqué.

Réponses:


103

Envisagez de simuler un champ d'entrée avec un préfixe ou un suffixe fixe à l'aide d'une étendue avec une bordure autour d'un champ d'entrée sans bordure. Voici un exemple de lancement de base:

.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>


13
de plus, vous pouvez envelopper le '$' dans une balise <Label>. Cela déplacera le focus vers le champ de saisie lorsqu'ils cliquent sur le texte '$'
Cohen

2
@Cohen Bien que ce soit une bonne idée, avoir plus d'une étiquette peut causer des problèmes d'accessibilité .
rybo111

63

Utilisez un .input-icondiv parent . Ajoutez é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 transformet top, et réglez-la pointer-eventssur nonepour que les clics se concentrent sur l'entrée. Ajustez paddinget widthselon 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, cela conservera la mise en évidence de validation d'entrée, comme une bordure rouge en cas d'erreur.

Exemple d'utilisation de JSFiddle avec Bootstrap et Font Awesome


Je voulais cela avec un bouton dans une ligne soignée et j'ai dû ajouter float:leftà la input-symboldiv
kluka

@ rybo111 non, je voulais dire un bouton séparé qui se trouve à l'extérieur du input-symbolconteneur
kluka

Vous avez raison, floatc'est mauvais donc j'utilise display:inline-blockcombiné avec vertical-align:bottommaintenant :) Je ne peux pas faire de violon rapidement, il y a trop d'autres CSS dans mon exemple actuel ;-)
kluka

1
J'aime cette réponse plus que celle acceptée car celle-ci (comme l'auteur le mentionne) conserve le comportement de validation de bootstrap, ce qui est génial !, merci pour cette aide.
Vadiraj

30

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

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;
}

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

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;
 }

C'est très proche de ce que je veux, mais l'entrée n'est pas stationnaire sur la largeur de la page et ne peut pas utiliser absolue. Relative déplace également le symbole. Comment définir la position absolue / relative par rapport au coin supérieur gauche de l'entrée?
nwolybug

La devise euro est toujours affichée à droite. Vous devez mettre votre symbole à droite au lieu de gauche.
jadok

Je suis français et les prix sont toujours écrits comme 2,50 € et non 2,50 € et je suis sûr que l'autre pays de la zone euro fait de même.
jadok

2
@jadok J'habite aux Pays-Bas sont ici les prix sont de 2,50 €.
Vincent Kok

1
@VincentKok Après avoir demandé autour de lui il semble que cela dépend du pays, le pays latines européen (France, Espagne, ...) le mettra à droite et le pays d'Europe du nord / est à gauche, vous pouvez l'essayer avec amazone par exemple : www.amazone.fr, www.amazone.nl, ...
jadok

22

Puisque vous ne pouvez pas faire ::beforeavec des content: '$'entrées et que l'ajout d'un élément absolument positionné ajoute du html supplémentaire - j'aime faire un css en ligne SVG en arrière-plan.

Ca fait plutot comme ca:

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;
}

Il produit les éléments suivants:

svg signe dollar fond css

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


2
Belle solution. J'ai fini par ajouter background-repeat: no-repeat;car le $ se répétait dans la zone de saisie.
Hamid Tavakoli

Comme les navigateurs peuvent rendre les éléments d'entrée comme des "éléments remplacés" (par exemple comme des widgets natifs du système), cela signifie que cela background-imagepeut ne pas être pris en charge, ou le navigateur peut rendre le widget lui-même au lieu d'utiliser les widgets fournis par le système.
Dai

4

J'ai fini par avoir besoin que le type reste toujours sous forme de nombre, j'ai donc utilisé CSS pour pousser le signe dollar dans le champ de saisie en utilisant une position absolue.

<div>
   <span style="position: absolute; margin-left: 1px; margin-top: 1px;">$</span>
   <input type="number" style="padding-left: 8px;">
</div>


3

Placez le '$' devant le champ de saisie de texte, au lieu de l'intérieur. Cela rend la validation des données numériques beaucoup plus facile car vous n'avez pas à analyser le '$' après la soumission.

Vous pouvez, avec JQuery.validate () (ou autre), ajouter 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 toujours faire une validation côté serveur pour la sécurité et cela vous remet dans la position de devoir supprimer le '$'.


1
Je vous remercie! J'étais conscient de cela, mais j'avais en fait besoin que mon signe de devise soit à l'intérieur du champ de texte. Il y a une meilleure réponse ci-dessous qui, je crois, peut être utile à de nombreuses personnes.
User3419

@Hristo: Je suis content que vous ayez trouvé une solution qui convient. Mais pour mémoire, celui que vous avez marqué comme réponse ne met pas votre $ dans le champ de saisie. Cela ne fait que donner l' impression d'être là avec le style. Cela dit, c'est vraiment élégant!
dnagirl

1
Oui, cela résout visuellement le problème, alors que votre suggestion ne fait que pointer (oui, toujours dans la bonne direction), mais je n'appellerais pas cela solution. Merci beaucoup encore et souvenez-vous que je ne voulais offenser personne ici!
User3419


2

Si vous avez seulement besoin de prendre en charge Safari, vous pouvez le faire comme ceci:

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

et un champ de saisie comme

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

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


7
: before et: after Les pseudo-sélecteurs CSS ne peuvent être utilisés que pour les balises conteneur et ne fonctionnent pas pour les balises d'entrée. stackoverflow.com/questions/2587669/…
Venkatesh Nannan

1

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 utilisant l'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;
}

Cela se traduit par l'entrée sur la barre latérale gauche ici:

https://fsfe.org


1

Je viens d'utiliser: avant avec l'entrée et j'ai passé $ comme contenu

input{ 
   margin-left: 20px;
 }
input:before {
  content: "$";
  position: absolute;
}

1
Je ne peux pas reproduire cela dans Chrome. Pouvez-vous publier un exemple JSFiddle fonctionnel?
Dai

les entrées ne prennent pas en charge les pseudo éléments dans CSS3. En d'autres termes, c'est impossible avec du CSS pur. Cependant, si vous utilisez jquery, vous pouvez utiliser $ ("input"). After ("$");
TaterJuice

0

Pour bootstrap ses travaux

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

N'utilisez pas class = "form-control" dans le champ de saisie.


0

.currencyinput {
    border: 1px inset #ccc;
    padding-bottom: 1px;//FOR IE & Chrome
}
.currencyinput input {
    border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>


Le code sans explication n'aide guère le PO ou les futurs spectateurs de cette réponse. Vous devez expliquer comment cela répond à la question.
leigero

0

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

Je recommanderais de positionner le signe dollar absolument à gauche environ -10px ou à gauche 5px (selon que vous le vouliez à 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 ajouter 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 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


1
Aucune des réponses n'y aidera, car ce n'est pas ce que la question demandait. Le symbole est censé être à l' intérieur de l'entrée.
rybo111

Techniquement, les réponses css ne mettent pas non plus le signe dollar dans le conteneur d'entrée. Je pense que la solution css acceptée introduit un problème d'alignement compliqué lorsqu'elle est appliquée à un formulaire typique. Comme on le voit ici: plnkr.co/edit/uhOfLw5WB6DIn2le9GZm?p=preview
Ted Scheckler

J'ai mis à jour cette solution pour placer le signe dollar à l'intérieur de l'entrée: plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview (position absolue à gauche 5px et définir la direction d'entrée sur rtl)
Ted Scheckler

0

<style>
.currencyinput {
    border: 1px inset #ccc;
    
    border-left:none;
}
.currencyinput input {
    border: 0;
}
</style>
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/.g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" style="text-align:right;border-right:none;outline:none" name="currency"><span class="currencyinput">%</span>
</body>
</html>

%


-1

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
.currencyinput {
    border: 1px inset #ccc;

    border-left:none;
}
.currencyinput input {
    border: 0;`enter code here`
}

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/.g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" style="text-align:right;border-right:none;outline:none" name="currency"><span class="currencyinput">%</span>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.