Динамическое изменение ширины input поля по контенту в CSS

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

Для того чтобы ширина текстового поля динамически менялась в зависимости от количества введённых символов, используйте JavaScript в сочетании с атрибутом size и событием oninput. JavaScript задаст начальное значение ширины, которое будет динамично изменяться при вводе текста. Вот пример:

<input type="text" size="10" oninput="this.size=Math.max(this.value.length, 10)">

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

Регулировка динамического размера с помощью CSS и единицы 'ch'

Единица 'ch' в CSS равна ширине символа '0' применяемого в поле ввода шрифта. Это позволяет удобно определить размер поля для ввода определённого числа символов. Например:

input[type="text"] {
  width: 10ch; /* Подойдет для ввода 10 символов */
}

Однако, из-за особенностей шрифта, результат может варьироваться примерно на 20-30%. Этот факт стоит учесть и отрегулировать ширину в соответствии с шрифтом, отступами и спецификой ввода пользователя.

Учёт шрифтов, спецсимволов и взаимодействия с пользователем

Разные шрифты и символы могут вести себя по-разному. В этом случае на помощь приходит динамический подход, который базируется на использовании JavaScript и манипуляциями с DOM. Мы отслеживаем событие input и, с помощью скрытого элемента <span>, который отображает содержимое и стиль поля ввода, подгоняем под него ширину поля:

function resizeInput(input) {
  let hiddenSpan = document.createElement('span');
  hiddenSpan.style.visibility = 'hidden';
  hiddenSpan.style.position = 'absolute';
  hiddenSpan.textContent = input.value || input.placeholder;
  
  document.body.appendChild(hiddenSpan);
  let newWidth = Math.max(hiddenSpan.scrollWidth, 10);
  input.style.width = `${newWidth}px`;
  
  document.body.removeChild(hiddenSpan);
}

document.querySelector('input[type=text]').addEventListener('input', function() {
  resizeInput(this);
});

Функция resizeInput подбирает ширину поля ввода, учитывая заполнители (placeholders), а также поддерживает минимальный размер поля.

Визуализация

Визуализируем наш поле ввода в следующем виде:

Поле ввода 🔭: [🔍📏]

Когда в поле начинают вводить текст:

"Планета" 🌍 = 🔭: [🔍📏📏📏📏📏📏]
"Комета" 💫  = 🔭: [🔍📏📏📏📏📏]

Ширина поля изменяется в зависимости от объёма введённого текста, подобно телескопу, настроенному на наблюдение за космическими объектами.

Длина отображает **Содержимое**:
"🔭: [🔍📏📏]" против "🔭: [🔍🔍🔍📏📏📏📏📏📏]"

Контроль за динамическим размером поля и кроссбраузерная совместимость

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

Особые пометки для учёта в специальных случаях

• Адаптируйте размер поля под текст, вводимый справа налево (RTL), и примите во внимание взаимодействие с редакторами метода ввода (IME).
• Если ширина плейсхолдера больше ширины введённого текста, поле ввода должно на это реагировать.

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

Адаптивный дизайн

Для создания адаптивного дизайна, поля ввода должны изменять свои размеры в рамках контейнера, опираясь на параметры скрытого тега <span>.

Преобразование полей ввода в jQuery

Если вы отдаёте предпочтение jQuery, тогда его возможности по работе с событиями и манипулированию DOM'ом помогут в настройке размера поля ввода:

$('input[type="text"]').on('input', function() {
  resizeInput($(this));
});

Обращаем внимание на демонстрации и удобство использования

При создании демо-версий и публичных проектов учтите удобство использования и доступность полей ввода. Применяемые решения должны быть понятными и универсальными.

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

1. MDN Web Docs – <input>: Элемент ввода данных формы — детальное описание элемента ввода.
2. W3Schools – Как создать автоматически расширяющееся поле ввода — инструкция по созданию динамического поля ввода.
3. Обсуждение на Stack Overflow – Автоматическое расширение ширины поля ввода в зависимости от содержимого — обзор мнений и опыта.
4. Статья на Medium – Искусство создания адаптивных форм — полезные рекомендации по созданию релизуемых форм.
5. Web Design Tuts+ – Коротко: Как использовать Web Inspector для отладки Mobile Safari — руководство по отладке форм на мобильных устройствах.
6. Учебник от DigitalOcean – Автоматическое изменение ширины поля ввода в зависимости от содержимого — образовательный материал по созданию поля ввода с динамической шириной.