Pole wprowadzania tekstu HTML z symbolem waluty

104

Chciałbym mieć pole wprowadzania tekstu zawierające znak „$” na samym początku i bez względu na to, jaka edycja nastąpi w polu, aby znak był trwały.

Byłoby dobrze, gdyby tylko liczby były akceptowane jako dane wejściowe, ale to tylko fantazyjny dodatek.

Użytkownik3419
źródło

Odpowiedzi:

104

Rozważ symulację pola wejściowego ze stałym przedrostkiem lub sufiksem przy użyciu zakresu z obramowaniem wokół pola wejściowego bez obramowania. Oto podstawowy przykład rozpoczęcia:

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

BalusC
źródło
13
dodatkowo możesz umieścić '$' wewnątrz tagu <Label>. Spowoduje to przeniesienie fokusu na pole wejściowe po kliknięciu
Cohen
2
@Cohen Chociaż to dobry pomysł, posiadanie więcej niż jednej etykiety może powodować problemy z dostępnością .
rybo111
63

Użyj nadrzędnego elementu .input-iconDIV. Opcjonalnie dodaj .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>

Align ikonę pionowo transformi toporaz zestaw pointer-eventsdo nonetak że kliknie skupić się na wejściu. Dostosuj paddingi widthodpowiednio:

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

W przeciwieństwie do zaakceptowanej odpowiedzi, zachowa to wyróżnienie sprawdzania poprawności danych wejściowych, takie jak czerwona ramka, gdy wystąpi błąd.

Przykład użycia JSFiddle z Bootstrap i Font Awesome

rybo111
źródło
Chciałem to z guzikiem w jednej zgrabnej linii i musiałem dodać float:leftdo input-symboldiv
kluka
@ rybo111 nie, chodziło mi o osobny przycisk, który jest poza input-symbolpojemnikiem
kluka
Masz rację, floatjest zły, więc używam w display:inline-blockpołączeniu z vertical-align:bottomteraz :) Nie mogę jednak szybko zrobić skrzypiec, w moim obecnym przykładzie jest zbyt wiele innych CSS ;-)
kluka
1
Podoba mi się ta odpowiedź niż zaakceptowana, ponieważ ta (jak wspomina autor) zachowuje zachowanie walidacji bootstrapa, co jest świetne!, Dziękuję za tę pomoc.
Vadiraj
30

Możesz zawinąć swoje pole wejściowe w zakres, który ty position:relative;. Następnie dodajesz za pomocą :before content:"€"symbolu waluty i tworzysz position:absolute. Działający 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;
}

Aktualizuj Jeśli chcesz umieścić symbol euro po lewej lub prawej stronie pola tekstowego. Działający 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;
 }
Philipp Hofmann
źródło
Jest to bardzo zbliżone do tego, czego chcę, ale dane wejściowe nie są stacjonarne względem szerokości strony i nie mogą używać wartości bezwzględnych. Względny również przesuwa symbol. Jak możemy ustawić pozycję bezwzględną / względną w stosunku do wejścia w lewym górnym rogu?
nwolybug
Waluta euro jest zawsze pokazana po prawej stronie. Powinieneś umieścić swój symbol po prawej stronie zamiast po lewej stronie.
jadok
Jestem Francuzem, a cena jest zawsze zapisywana jako 2,50 €, a nie 2,50 € i jestem pewien, że inny kraj strefy euro robi to samo.
jadok
2
@jadok Mieszkam w Holandii, tutaj ceny są zapisane jako 2,50 €.
Vincent Kok
1
@VincentKok Po zapytaniu wygląda na to, że zależy to od kraju, kraj latynosów europejskich (Francja, Hiszpania, ...) umieści go po prawej, a kraj północno-wschodniej europy po lewej, możesz spróbować z amazone na przykładzie : www.amazone.fr, www.amazone.nl, ...
jadok
22

Ponieważ nie można zrobić ::beforez content: '$'na wejściach i dodanie elementu pozycjonowanego bezwzględnie dodaje dodatkowy html - Lubię robić w css tło SVG inline.

To wygląda mniej więcej tak:

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

Wyprowadza następujące informacje:

svg znak dolara tło css

Uwaga: cały kod musi znajdować się w jednej linii. Wsparcie jest całkiem dobre w nowoczesnych przeglądarkach, ale koniecznie przetestuj.

Jeff Callahan
źródło
2
Niezłe rozwiązanie. Skończyło się na dodawaniu, background-repeat: no-repeat;ponieważ $ powtarzał się w polu wprowadzania.
Hamid Tavakoli,
Ponieważ przeglądarki mogą renderować elementy wejściowe jako „elementy zastępowane” (np. Jako natywne widżety systemu), oznacza to, że background-imagemoże to nie być obsługiwane lub przeglądarka może renderować sam widget zamiast korzystać z widgetów dostarczonych przez system.
Dai
4

Skończyło się na tym, że potrzebowałem, aby typ nadal pozostał jako liczba, więc użyłem CSS, aby wepchnąć znak dolara w pole wejściowe, używając pozycji bezwzględnej.

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

Andy
źródło
3

Umieść „$” przed polem wprowadzania tekstu zamiast wewnątrz. To znacznie ułatwia walidację danych liczbowych, ponieważ nie trzeba analizować znaku „$” po przesłaniu.

Za pomocą JQuery.validate () (lub innego) można dodać reguły walidacji po stronie klienta, które obsługują walutę. Umożliwiłoby to umieszczenie „$” wewnątrz pola wejściowego. Ale nadal musisz przeprowadzić walidację po stronie serwera dla bezpieczeństwa, a to stawia Cię z powrotem w sytuacji, w której musisz usunąć '$'.

dnagirl
źródło
1
Dziękuję Ci! Byłem tego świadomy, ale tak naprawdę potrzebowałem, aby mój znak waluty znajdował się w polu tekstowym. Poniżej znajduje się lepsza odpowiedź, która, jak sądzę, może być pomocna dla wielu ludzi.
User3419
@Hristo: Cieszę się, że znalazłeś odpowiednie rozwiązanie. Ale dla przypomnienia, ten, który oznaczyłeś jako odpowiedź, nie umieszcza twojego $ w polu wejściowym. To tylko sprawia, że wydaje się, że jest tam ze stylizacją. To powiedziawszy, jest zdecydowanie zgrabny!
dnagirl
1
Tak, wizualnie rozwiązuje problem, podczas gdy twoja sugestia tylko wskazuje (tak, nadal we właściwym kierunku), ale nie nazwałbym tego rozwiązaniem. Jeszcze raz bardzo dziękuję i pamiętaj, że nie chciałem tu nikogo urazić!
User3419
2

Jeśli potrzebujesz tylko obsługi Safari, możesz to zrobić w następujący sposób:

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

i pole wprowadzania, takie jak

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

W ten sposób nie potrzebujesz dodatkowego tagu i zachowujesz informacje o symbolu w znaczniku.

Sebastian
źródło
7
Pseudoselektory: before i: after CSS mogą być używane tylko w przypadku tagów kontenerów i nie działają dla znaczników wejściowych. stackoverflow.com/questions/2587669/…
Venkatesh Nannan
1

Innym rozwiązaniem, które preferuję, jest użycie dodatkowego elementu wejściowego dla obrazu symbolu waluty. Oto przykład wykorzystujący obraz lupy w polu tekstowym wyszukiwania:

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

Powoduje to wejście na lewym pasku bocznym tutaj:

https://fsfe.org

Sam Tuke
źródło
1

Właśnie użyłem: wcześniej z danymi wejściowymi i przekazałem $ jako zawartość

input{ 
   margin-left: 20px;
 }
input:before {
  content: "$";
  position: absolute;
}
DynamisDevelopment
źródło
1
Nie mogę tego odtworzyć w Chrome. Czy możesz opublikować działający przykład JSFiddle?
Dai
dane wejściowe nie obsługują pseudoelementów w CSS3. Innymi słowy, jest to niemożliwe w przypadku czystego CSS. Jednak jeśli używasz jquery, możesz użyć $ ("input"). After ("$");
TaterJuice
0

Na bootstrap jego prace

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

Nie używaj class = "form-control" w polu wejściowym.

Jestin
źródło
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>

Christian Bocaz
źródło
Kod bez wyjaśnienia niewiele pomaga OP lub przyszłym widzom tej odpowiedzi. Powinieneś wyjaśnić, jak to odpowiada na pytanie.
leigero
0

Żadna z tych odpowiedzi naprawdę nie pomaga, jeśli zależy ci na wyrównaniu lewej krawędzi z innymi polami tekstowymi w formularzu wejściowym.

Zalecałbym umieszczenie znaku dolara absolutnie w lewo o około -10 pikseli lub w lewo o 5 pikseli (w zależności od tego, czy chcesz go umieścić w polu wejściowym, czy poza nim). Rozwiązanie wewnętrzne wymaga zmiany kierunku: rtl na wejściu css.

Możesz również dodać wypełnienie do danych wejściowych, aby uniknąć kierunku: rtl, ale spowoduje to zmianę szerokości kontenera wejściowego, aby nie pasował do innych kontenerów o tej samej szerokości.

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

lub

<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

Przykład: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview

Ted Scheckler
źródło
1
Żadna z odpowiedzi nie pomoże w tym, ponieważ nie o to chodziło w pytaniu. Symbol powinien znajdować się wewnątrz wejścia.
rybo111
Technicznie rzecz biorąc, odpowiedzi CSS nie umieszczają również znaku dolara w kontenerze wejściowym. Myślę, że przyjęte rozwiązanie CSS wprowadza skomplikowany problem z wyrównaniem po zastosowaniu do typowej formy. Jak widać tutaj: plnkr.co/edit/uhOfLw5WB6DIn2le9GZm?p=preview
Ted Scheckler
Zaktualizowałem to rozwiązanie, aby umieścić znak dolara wewnątrz wejścia: plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview (pozycja bezwzględna w lewo 5px i ustaw kierunek wprowadzania na 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>

%

Ashish Rajput
źródło
-1

Tak, jeśli używasz bootstrap, to zadziała.

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

i

<span class="form-control">$ <input type="text"/></span>
Johnson Carneiro
źródło
-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>
Ashish Rajput
źródło