Динамический рост поля ввода HTML: CSS решение без JS

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

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

document.querySelector('input[type="text"]').oninput = function() {
 this.size = Math.max(this.value.length, 1);
};

Событие oninput позволяет настроивать размер поля в соответствии с вводимым содержимым, устанавливая при этом минимальное значение size равным 1. Это не позволит полю "сжаться" до нулевого размера, если вы удалите из него весь текст.

Внесите блеск и изящество с CSS

JavaScript – это эффективный инструмент, но на помощь приходит и CSS, особенно в простых случаях.

contenteditable — Берегите себя от ненужных проблем

Атрибут contenteditable на элементе div позволяет создать текстовое поле, которое автоматически увеличивается при вводе текста. Однако, следует быть осторожным, так как эта функция может привести к HTML-инъекциям.

div[contenteditable="true"] {
  display: inline-block;
  min-width: 50px;
  max-width: 200px;
  border: 1px solid #ccc;
}

<div contenteditable="true"></div>

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

Вариант с использованием невидимого элемента

Скрытый элемент можно применять для измерения ширины текста и соответствующего изменения размера текстового поля.

function resizeInput(input) {
  var tmp = document.createElement("span");
  tmp.className = "hidden";
  tmp.innerHTML = input.value.replace(/&/g, "&amp;").replace(/</g, "&lt;")
                             .replace(/>/g, "&gt;");
  document.body.appendChild(tmp);
  input.style.width = tmp.offsetWidth + "px";
  document.body.removeChild(tmp);
}

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

Уделите внимание стилизации и обеспечению невидимости скрытого элемента.

Обеспечьте идеал взаимодействия с пользователем

Псевдокласс :focus в CSS применяется для создания интерактивного эффекта при взаимодействии с полем ввода.

input[type="text"]:focus {
  border-color: #4b9efa;
}

Соответствие для каждого браузера

Используйте getComputedStyle или currentStyle для IE, чтобы обеспечить единообразность отображения в различных браузерах.

function getInputWidth(input) {
  if (input.currentStyle) {
    return input.currentStyle.width;
  } else if (window.getComputedStyle) {
    return window.getComputedStyle(input, null).width;
  }
}

Элегантность и плавность с помощью задержки реакции

Для более плавного изменения размера поля оптимально будет использовать функцию setTimeout с некоторой задержкой.

var resizeDelay;

document.querySelector('input[type="text"]').onkeydown = function() {
  clearTimeout(resizeDelay);
  resizeDelay = setTimeout(function() {
    resizeInput(this);
  }.bind(this), 200);
};

jQuery в стиле утончённой элегантности

jQuery предлагает довольно простой метод для изменения размера текстового поля ввода:

$('input[type="text"]').on('input', function() {
  $(this).css('width', $(this).val().length + 'ch');
});

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

Советы от ведущих игроков — Soundcloud

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

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

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

| Количество введённых символов| Визуализация   |
| ---------------------------- | -------------- |
| 1-10                         | 🎈              |
| 11-20                        | 🎈🔜            |
| 21-30                        | 🎈🔜📏          |
| 31+                          | 🎈🔜📏🌬️         |

Работа с атрибутом 'size'

Атрибут size можно корректировать напрямую с помощью JavaScript и медиа-запросов CSS для адаптации поля под различные условия использования.

window.onresize = function() {
  var inputFields = document.querySelectorAll('input[type="text"]');
  inputFields.forEach(function(input) {
    // Здесь нужно обновить размер поля ввода в зависимости от ширины окна.
  });
};

Макрообъект — Дизайн формы

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

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

1. The Cleanest Trick for Autogrowing Textareas | CSS-Tricks — секреты создания универсальных текстовых полей.
2. <input>: Элемент ввода (Form Input) – HTML: HyperText Markup Language | MDN — подробное руководство по работе с элементом <input>.
3. Как создать автозаполнение в поле ввода — инструкция по созданию функции автозаполнения.
4. javascript – Есть ли плагин jQuery для автовырастания текстовых полей? – Stack Overflow — обсуждения и рекомендации по созданию автоувеличивающихся полей.
5. Стандарт HTML — подробности о работе с формами в HTML.
6. javascript – Автоматически расширяющееся текстовое поле – Stack Overflow — опыт реализации автоматически расширяемых текстовых полей.