Pole wprowadzania tekstu HTML z symbolem waluty

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.

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>

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

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

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:

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

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>

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

 $<input name="currency">

Zobacz też: Ograniczanie wprowadzania danych do pola tekstowego: zezwalanie tylko na liczby i separator dziesiętny

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.

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

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

Na bootstrap jego prace

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

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

Ż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

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

%

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>

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