web-dev-qa-db-fra.com

Champ de saisie de texte HTML avec 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 apportée au champ, pour que le signe soit persistant.

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

htmltextfieldcurrencypersistent
84
User3419

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

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

87
BalusC

Utilisez un parent .input-icon div. 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 sur transform et top et définissez pointer-events sur none pour que les clics soient activés. Ajustez padding et width comme il convient:

.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 de l'entrée, telle qu'une bordure rouge en cas d'erreur.

Exemple d'utilisation de JSFiddle avec Bootstrap et Font Awesome

50
rybo111

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

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 souhaitez placer le symbole de l'euro à gauche ou à droite de la zone de texte. Travailler 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;
 }
27
Philipp Hofmann

Puisque vous ne pouvez pas faire ::before avec content: '$' sur les entrées et que vous ajoutiez un élément positionné de façon absolue, vous ajoutiez du code html - j'aime le faire sur un css SVG en ligne 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 génère les éléments suivants:

 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 le tester.

15
Jeff Callahan

Placez le '$' devant le champ de saisie de texte, plutôt que dans celui-ci. Cela facilite beaucoup la validation des données numériques car vous n'avez pas à analyser le '$' après l'envoi.

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 effectuer une validation côté serveur pour des raisons de sécurité, ce qui vous oblige à supprimer le '$'.

3
dnagirl

Si vous devez uniquement prendre en charge Safari, vous pouvez le faire comme suit:

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">

Ainsi, vous n'avez pas besoin d'une balise supplémentaire et conservez les informations sur le symbole dans le balisage.

2
Sebastian
 $<input name="currency">

Voir aussi: Restreindre l'entrée à la zone de texte: autoriser uniquement les nombres et le point décimal

1
Quentin
<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>

%

0
Ashish Rajput

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 à l'aide d'une position absolue.

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

0
Andy

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

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

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

Je vous recommande de placer le signe dollar tout à fait à gauche, à environ -10 pixels ou à 5 pixels à gauche (selon que vous le vouliez ou non à l'intérieur du champ 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

0
Ted Scheckler

Une autre solution que je préfère consiste à utiliser un élément de saisie supplémentaire pour une image du symbole monétaire. 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;
}

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

https://fsfe.org

0
Sam Tuke