Я хотел бы иметь текстовое поле ввода, содержащее знак "$" в самом начале, и независимо от того, какое редактирование происходит в поле, чтобы знак был постоянным.
Я был бы хорош, если бы только цифры были приняты для ввода, но это просто причудливое дополнение.
Рассмотрим моделирование поля ввода с фиксированным префиксом или суффиксом с использованием диапазона с рамкой вокруг поля ввода без полей. Вот пример основного запуска:
.currencyinput {
border: 1px inset #ccc;
}
.currencyinput input {
border: 0;
}<span class="currencyinput">$<input type="text" name="currency"></span> Используйте родительский .input-icon div. При желании добавьте .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>
Выровняйте значок по вертикали с transform и top, и установите для pointer-events значение none чтобы щелчки фокусировались на вводе. Отрегулируйте padding и width соответствующим образом:
.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;
}
В отличие от принятого ответа, при сохранении ошибки будет сохранен подсвечиваемый ввод, например, красная граница.
Вы можете обернуть свое поле ввода в диапазон, который вы position:relative;. Затем вы добавляете
:before content:"€" ваш символ валюты и сделайте его position:absolute. Работа 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;
}
Обновление Если вы хотите поместить символ евро слева или справа от текстового поля. Работа 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;
}
Так как вы не можете сделать ::before с content: '$' на входах, а добавление абсолютно позиционированного элемента добавляет дополнительный html - мне нравится делать на фоне SVG inline css.
Это выглядит примерно так:
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;
}
Выводит следующее:
Примечание. код должен находиться в одной строке. Поддержка очень хороша в современных браузерах, но обязательно проверьте.
Поместите '$' перед полем ввода текста, а не внутри него. Это упрощает проверку числовых данных, потому что вам не нужно разбирать "$" после отправки.
Вы можете с JQuery.validate() (или другим) добавить несколько правил проверки на стороне клиента, которые обрабатывают валюту. Это позволит вам иметь "$" внутри поля ввода. Но вам все равно придется выполнять проверку на стороне сервера для обеспечения безопасности, и это возвращает вас к необходимости удалить "$" .
$<input name="currency">
Смотрите также: Ограничение ввода в текстовое поле: разрешение только чисел и десятичной точки
Если вам нужно только поддерживать Safari, вы можете сделать это следующим образом:
input.currency:before {
content: attr(data-symbol);
float: left;
color: #aaa;
}
и поле ввода, например
<input class="currency" data-symbol="€" type="number" value="12.9">
Таким образом, вам не нужен дополнительный тег и сохраняйте информацию о символах в разметке.
Я просто использовал: раньше с вводом и передал $ в качестве содержимого
input{
margin-left: 20px;
}
input:before {
content: "$";
position: absolute;
}
Другим решением, которое я предпочитаю, является использование дополнительного элемента ввода для изображения символа валюты. Здесь пример, использующий изображение увеличительного стекла в текстовом поле поиска:
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;
}
Это приводит к вводу на левой боковой панели:
В конце концов мне понадобился тип, чтобы все еще оставаться числом, поэтому я использовал CSS, чтобы вставить знак доллара в поле ввода, используя абсолютную позицию.
<div>
<span style="position: absolute; margin-left: 1px; margin-top: 1px;">$</span>
<input type="number" style="padding-left: 8px;">
</div>Ни один из этих ответов действительно не поможет, если вы хотите выровнять левую границу с другими текстовыми полями в форме ввода.
Я бы рекомендовал расположить знак доллара слева от -10px или около 5 пикселей (в зависимости от того, хотите ли вы его внутри или снаружи поля ввода). Внутреннее решение требует направления: 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
<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>Для бутстрапа его работы
<span class="form-control">$ <input type="text"/></span>
Не используйте
class= "form-control" в поле ввода.
.currencyinput {
border: 1px inset #ccc;
padding-bottom: 1px;//FOR IE & Chrome
}
.currencyinput input {
border: 0;
}<span class="currencyinput">$<input type="text" name="currency"></span>Да, если вы используете загрузчик, это будет работать.
.form-control input {
border: none;
padding-left: 4px;
}
а также
<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>