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

413

06 апреля 2017, 17:08

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

Answer 1

Атрибут contenteditable

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

.input { 
  width: auto; 
  display: inline-block; 
  width: auto; 
  font-size: 28px; 
  border-bottom: 1px dotted #dee1e5; 
  padding: 0px; 
  color: #242A37; 
  padding: 2px; 
  line-height: 34px; 
} 
 
.input[contenteditable=true]:empty:before { 
  content: attr(placeholder); 
  display: block; 
  color: #dee1e5; 
}

<div class="input" contenteditable="true" placeholder="John Doe"></div>

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

Answer 2

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

<input autofocus style=width:0>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

Перерисовка изображения c#

Ошибка при редактировании отфильтрованного BindingListCollectionView

Преобразование массива double в complex

Что такое делегат в языке С#?