HTML/CSS/JS резиновый Input

#javascript #html #jquery #css

Ребят привет! Столкнулся с такой задачей: Нужно сверстать резиновый input что бы
при наборе текста он растягивался под содержимое и отодвигал все то что сбоку (если
он в тексте стоит). Вот пример формы, надо сделать именно так же: http://significa.pt/enquiry/
 Но как я посмотрел Здесь форма сделана через дивы и похоже все инпуты скрыты и из
дивов value передается в инпуты и потом они же перекидываются на почту. Помогите с
этим, как это реализовать? 
    

Ответы

Ответ 1

document.querySelector('input').addEventListener('input', function () {
  this.style.width = 0;
  this.style.width = this.scrollWidth + 'px';
});



Ответ 2

Атрибут contenteditable

Сообщает, что элемент доступен для редактирования пользователем — можно удалять текст
и вводить новый. Также работают стандартные команды вроде отмены, вставки текста из
буфера и др. (источник: Атрибут contenteditable)



.input {
  width: auto;
  display: inline-block;
  font-size: 28px;
  border-bottom: 1px dotted #dee1e5;
  color: #242A37;
  padding: 2px;
  line-height: 34px;
}

.input[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #dee1e5;
}





А конкретно по вашему донору significa.pt/enquiry/ - там нет форм и инпутов, но по
сабмиту собираются данные из заполнявшихся клиентом div'ов, пакуются в json и ajax'ом
летят в обработчик.