Создание поля ввода с символом валюты на HTML: $ и числа

Быстрый ответ

Чтобы внедрить символ валюты в текстовое поле HTML, можно воспользоваться трюком поставновки этого символа с помощью CSS, используя относительное позиционирование. Выполните размещение тега <span> рядом с input, который отобразит необходимый символ валюты:

<div style="display: inline-block; position: relative;">
  <span style="position: absolute; left: 5px; top: 50%; transform: translateY(-50%);">$</span>
  <input type="text" style="padding-left: 20px;" />
</div>

Такой код создаст впечатление, что символ доллара – это часть поля ввода. Чтобы вывести это под свой дизайн в идеальное состояние, отрегулируйте размеры и позиционирование элемента span.

Вспомогательные элементы CSS для улучшения UX

Применение псевдоэлементов

Для того чтобы добавить постоянный префикс "$" в поле ввода, используйте псевдоэлемент CSS ::before:

.input-with-symbol::before {
  content: '$';
  position: absolute;
  margin-left: 5px;
  pointer-events: none; /* Хитрости от W3C 😉 */
}

Подробнее об этом расскажет наш спикер на видео

Оформление поля ввода

Для улучшения визуальной представляемости поля ввода, вы можете отрегулировать стили CSS так:

.input-with-symbol input[type="text"] {
  border: 1px solid #ccc;
  padding-left: 25px; /* Мы учли место для символа доллара 💺 */
  /* И это только начало возможностей дизайна */
}

Улучшение доступности и читабельности поля ввода

Не забывайте о доступности:

• Применяйте теги label, чтобы улучшить доступность с использованием вспомогательных технологий.
• Следите за тем, чтобы продолжали использоваться определения валидности ввода, чтобы пользователи видели состояние текстового поля.
• Разместите текст по правому краю с помощью text-align: right;, если этот подход распространен в вашем регионе.

Применение inline SVG в качестве символа валюты

Вместо текста можно использовать SVG-изображение в качестве фонового изображения для символа валюты:

.input-with-symbol input[type="text"] {
  background-image: url("data:image/svg+xml,...");
  background-repeat: no-repeat;
  background-size: 10px 10px;
  background-position: left center;
  padding-left: 25px; /* Пожалуйста, трепещите перед нашим SVG */
}

Продвинутые методы

Задействие JavaScript

С применением JavaScript вы можете автоматически добавить в поле ввода запятые и десятичные знаки, как это делает крупье за игровым столом:

document.querySelector('input[type="text"]').addEventListener('input', (event) => {
  event.target.value = formatCurrency(event.target.value); /* Обслуживание на уровне экспресс-доставки 🚚 */
});

Тестирование, тестирование и еще раз тестирование

Не забывайте:

• Проверить совместимость использованных CSS-техник с браузерами, особенно в отношении SVG-фонов.
• Протестировать поле ввода на различных устройствах и в разнообразных браузерах для гарантии стабильной функциональности.

Адаптация под локальным особенности валют

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

Полезные материалы

1. HTML input tag — подробное руководство по HTML-тегу ввода.
2. :placeholder-shown | CSS-Tricks — все, что вы хотели знать о стилизации плейсхолдеров в полях ввода.
3. ::before – CSS: Cascading Style Sheets | MDN — обстоятельная документация о псевдоэлементе ::before.
4. html – Is there a float input type in HTML5? – Stack Overflow — дискуссия по вопросу создания полей ввода для чисел с плавающей запятой.
5. position – CSS: Cascading Style Sheets | MDN — глубокое изучение CSS-свойства position.
6. Clipping and Masking in CSS | CSS-Tricks — обучение передовым приемам настройки пользовательских дизайнов ввода.
7. HTML Standard — удобный справочник по элементам форм HTML.