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.
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>
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
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;
}
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:
Note: le code doit être inscrit sur une seule ligne. Soutien est assez bonne dans les navigateurs modernes, mais assurez-vous de tester.
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'$'.
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.
$<input name="currency">
Voir aussi: restreindre l'entrée à textbox: ne permettre que les nombres et les points décimaux
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:
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
pour bootstrap ses oeuvres
<span class="form-control">$ <input type="text"/></span>
N'utilisez pas class=" form-control " dans le champ d'entrée.
.currencyinput {
border: 1px inset #ccc;
padding-bottom: 1px;//FOR IE & Chrome
}
.currencyinput input {
border: 0;
}
<span class="currencyinput">$<input type="text" name="currency"></span>
Oui, si vous utilisez bootstrap, cela fonctionnerait.
.form-control input {
border: none;
padding-left: 4px;
}
et
<span class="form-control">$ <input type="text"/></span>