Как сделать , чтобы при вводе текста в инпут он расширялся

Question

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

#mytext{
  box-sizing: border-box;
  border: 2px solid grey;
  border-radius: 5px;
  font-size: 1em;
  padding: .5em;
  width: 5em;
  transition: width 1s ease;
}

#mytext:focus {
  width: 9em;
}

<input type="text" id="mytext" placeholder="Search..."/>

Answer 1

let input = document.getElementById('mytext');
input.addEventListener('input', autoresize);

function autoresize() {
  let size = input.scrollWidth
  input.style.width = size + 'px';
  input.style.transition = "none";
}

#mytext {
  display: inline-flex;
  flex-wrap: nowrap;
  box-sizing: border-box;
  border: 2px solid grey;
  border-radius: 5px;
  font-size: 1em;
  padding: .5em;
  width: 100px;
  min-width: 100px;
  max-width: 500px;
}

#mytext:focus {
  width: 200px;
  min-width: 200px;
  transition: all 1s ease;
}

<input type="text" id="mytext" placeholder="Search...">

О друг мой, смотрю, да вы уже не новичок и у вас скопилось много вопросов. Вам участники отвечают на ваши вопросы, а от вас реакции совершенно никакой. Почитайте, пожалуйста, справку, будет полезно. А я на этом с вами прощаюсь, навсегда :) и в дальнейшем постараюсь вас полностью игнорировать. Так что, будь здоров Виктор Петров.

Answer 2

Если ширина должна увеличиватся до 9em, то можно использовать псевдо класс placeholder-shown (если плейсхолдер скрыт - ширина 9em)

Поддержка placeholder-shown 96% по миру

#mytext{
  box-sizing: border-box;
  border: 2px solid grey;
  border-radius: 5px;
  font-size: 1em;
  padding: .5em;
  width: 5em;
  transition: width 1s ease;
}

#mytext:focus {
  width: 9em;
}

#mytext:not(:placeholder-shown){
  width: 9em;
}

<input type="text" id="mytext" placeholder="Search..."/>

БЛОГ НА HUSL

Как сделать , чтобы при вводе текста в инпут он расширялся

Ответы (2 шт):