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żyj nadrzędnego elementu
.input-icon
DIV. Opcjonalnie dodaj.input-icon-right
.Align ikonę pionowo
transform
itop
oraz zestawpointer-events
donone
tak że kliknie skupić się na wejściu. Dostosujpadding
iwidth
odpowiednio: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
źródło
float:left
doinput-symbol
divinput-symbol
pojemnikiemfloat
jest zły, więc używam wdisplay:inline-block
połączeniu zvertical-align:bottom
teraz :) Nie mogę jednak szybko zrobić skrzypiec, w moim obecnym przykładzie jest zbyt wiele innych CSS ;-)Możesz zawinąć swoje pole wejściowe w zakres, który ty
position:relative;
. Następnie dodajesz za pomocą:before
content:"€"
symbolu waluty i tworzyszposition:absolute
. Działający JSFiddleHTML
CSS
Aktualizuj Jeśli chcesz umieścić symbol euro po lewej lub prawej stronie pola tekstowego. Działający JSFiddle
HTML
CSS
źródło
Ponieważ nie można zrobić
::before
zcontent: '$'
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:
Wyprowadza następujące informacje:
Uwaga: cały kod musi znajdować się w jednej linii. Wsparcie jest całkiem dobre w nowoczesnych przeglądarkach, ale koniecznie przetestuj.
źródło
background-repeat: no-repeat;
ponieważ $ powtarzał się w polu wprowadzania.background-image
może to nie być obsługiwane lub przeglądarka może renderować sam widget zamiast korzystać z widgetów dostarczonych przez system.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.
źródło
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ąć '$'.
źródło
Zobacz też: Ograniczanie wprowadzania danych do pola tekstowego: zezwalanie tylko na liczby i separator dziesiętny
źródło
Jeśli potrzebujesz tylko obsługi Safari, możesz to zrobić w następujący sposób:
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.
źródło
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:
css:
Powoduje to wejście na lewym pasku bocznym tutaj:
https://fsfe.org
źródło
Właśnie użyłem: wcześniej z danymi wejściowymi i przekazałem $ jako zawartość
źródło
Na bootstrap jego prace
Nie używaj class = "form-control" w polu wejściowym.
źródło
źródło
Ż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.
lub
https://i.imgur.com/ajrU0T9.png
Przykład: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview
źródło
%
źródło
Tak, jeśli używasz bootstrap, to zadziała.
i
źródło
źródło