Как сделать auto width для поля input?

Question

[Роман]

Нужно чтобы поле input автоматически подстраивало width в зависимости от количества текста. Такое возможно?)

Answer 1

[Павел Кононенко]

В одну строку и без зависимостей это делается так:

<input type="text" onkeydown="this.style.width = ((this.value.length + 1) * 8) + 'px';">

Comments

[teotlu]

Правда, ширина только увеличивается, а не уменьшается, и точно работает только для моноширинных шрифтов, у которых проставлен font-size, соответствующий ширине символа в 8px. Я бы всё-таки рекомендовал написать небольшой плагин для этого, основанный, например, на невидимом div с такими же параметрами шрифта как у input.

[Павел Кононенко]

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

Answer 2

[teotlu]

Вот вам быстренько решение на jQuery (он и так на большинстве сайтов используется). На нативный js, в общем-то, очень легко переделать, если нужно.
Через css можно задать минимальную, максимальную и начальную ширину у input.
Учтено, что может быть разный размер шрифта и расстояние между буквами.

Comments

[4uva4ok1905]

Все бы ничего, но пробел то не учитывает

[romanu418]

Изменить на
white-space: pre;

[Сергей Василенко]

Хорошее решение!
Я бы ещё добавил, когда value меняется программно....
$input_count.on('input change', function(e) {

и учитывать шрифт

.input-buffer {
  position: absolute;
  top: -1000px;
  left: -1000px;
  visibility: hidden;
  white-space: nowrap;
  font-family: inherit;
  letter-spacing: inherit;
  font-size: 20px;
}

и если value меняется кнопками + и -

$input_count.trigger('change');

Answer 3

[Kanasimy]

на нативном js решение, для любого количества input

Comments

[Alzasr]

Здесь white-space: pre надо сделать. Иначе двойные пробелы схлапываются