Поле ввода текста HTML с символом валюты

Question

Мне бы хотелось, чтобы поле ввода текста содержало знак "$" в самом начале и независимо от того, какое редактирование происходит с полем, чтобы этот знак был постоянным.

Было бы неплохо, если бы на вход принимались только цифры, но это просто необычное дополнение.

Answer 1

Да, если вы используете загрузчик, это будет работать.

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

и

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

Answer 2

Ни один из этих ответов действительно не поможет, если вы хотите выровнять левую границу с другими текстовыми полями в форме ввода.

Я бы рекомендовал расположить знак доллара влево примерно на -10px или влево на 5px (в зависимости от того, хотите ли вы его внутри или вне поля ввода). Внутреннее решение требует направления: rtl на входе css.

Вы также можете добавить заполнение для ввода, чтобы избежать направления: rtl, но это изменит ширину входного контейнера, чтобы не соответствовать другим контейнерам такой же ширины.

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

или

<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

Пример: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview

Answer 3

.currencyinput {
    border: 1px inset #ccc;
    padding-bottom: 1px;//FOR IE & Chrome
}
.currencyinput input {
    border: 0;
}

<span class="currencyinput">$<input type="text" name="currency"></span>

Answer 4

Для начальной загрузки его работы

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

Не используйте class = "form-control" в поле ввода.