Champ de saisie de texte HTML avec symbole monétaire

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é.

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>

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

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

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:

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

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>

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 '$'.

 $<input name="currency">

Voir aussi: Restreindre la saisie à la zone de texte: autoriser uniquement les nombres et le point décimal

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.

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

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

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

Pour bootstrap ses travaux

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

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

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

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

%

Oui, si vous utilisez bootstrap, cela fonctionnerait.

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

et

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

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