Интерактивный индикатор для поля ввода
Создадим поле ввода с интерактивным индикатором, который изменяет ширину в зависимости от длины введённого текста.
Для начала добавим базовую HTML-структуру.
Добавим типовую разметку формы, которая содержит теги <search>, <form> и <input>. Для <input> зададим подсказку через placeholder. Тег <div> с классом form__underline будем использовать для полосы под полем ввода.
Зададим стили поля для ввода: увеличим размер шрифта, добавим отступы, выберем цвет текста и фона, а также центрируем текст.
Настроим стили подсказки в поле для ввода с помощью псевдоэлемента .form__input::placeholder, зададим меньший размер шрифта, разрядку между буквами и приглушённый цвет.
«Нарисуем» линию, которая показывает размер текста.
Зададим <div> высоту 8px. Цвет сделаем розовым. И обязательно добавим выравнивание по центру с помощью автоматических внешних отступов.
Создадим файл script.js и подключим его к странице, чтобы начать писать логику изменения размера линии.
Для начала найдём все необходимые элементы на странице:
- форму, чтобы был контейнер для всех элементов.
- поле для ввода, чтобы отслеживать ввод пользователя.
- линию, которая будет менять размер.
Отключим отправку формы с помощью preventDefault(). Это нужно исключительно для удобства работы с демонстрацией.
Добавим слушателя input. Событие input отслеживает каждое нажатие клавиши внутри поля ввода. Внутри этого обработчика будем менять размер линии в зависимости от введённого текста.
Добавим скрытый блок для дублирования текста из поля для ввода, чтобы точно вычислять его ширину.
Блок .hidden нужно прятать таким образом, чтобы его размеры изменялись при изменении его содержимого и эти размеры можно было считать с помощью JavaScript.
Мы использовали типовой .visually-hidden и немного упростили его стили.
Найдём скрытый блок и приступим к расчёту ширины текста.
Из объекта event узнаем, что ввёл пользователь в <input>. Для этого используем event.target.value.
Добавим код с имитацией события ввода, как будто бы пользователь ввёл строчку Я! Есть! Текст!. Так нам будет проще тестировать обработчик.
Текст в поле появился. Убедимся, что он приходит и в обработчик.
Внутри обработчика выведем в консоль значение из события. Должно быть Я! Есть! Текст!.
Можете свернуть консоль, изменить текст в поле для ввода и убедиться, что обновления появились в консоли.
В скрытый блок hidden вставим пользовательский текст из поля для ввода. Если пользователь ничего не ввёл, оставим пустую строку.
В переменную width сохраним ширину скрытого блока. Добавим дополнительные 10px для отступа.
В переменную counter запишем отношение общей ширины формы form к ширине скрытого блока width. С помощью функции parseInt округлим получившееся число.
Изменим текст в нашей имитации ввода, чтобы проверить, что значения рассчитываются корректно. Текст изменился и значения изменились. Всё хорошо.
Используем значение из counter как ширину в процентах для <div> с классом .form__underline.
Чтобы задать ширину, определим underline.style.width.
Снова изменим текст в имитации ввода и проверим, что ширина полоски-подчёркивания изменилась.
Удалим весь отладочный код.
Введите любой текст в поле для ввода и полностью его удалите.
Если пользователь удалил весь текст в поле для ввода, вернём длину линии в исходное значение 100%.
Добавим переход transition для линии-подчёркивания, чтобы изменения длины были плавными.
Демонстрация завершена.
