Ребят привет! Столкнулся с такой задачей: Нужно сверстать резиновый input что бы при наборе текста он растягивался под содержимое и отодвигал все то что сбоку (если он в тексте стоит). Вот пример формы, надо сделать именно так же: http://significa.pt/enquiry/ Но как я посмотрел Здесь форма сделана через дивы и похоже все инпуты скрыты и из дивов value передается в инпуты и потом они же перекидываются на почту. Помогите с этим, как это реализовать?
2 ответа
document.querySelector('input').addEventListener('input', function () {
this.style.width = 0;
this.style.width = this.scrollWidth + 'px';
});
<input autofocus style=width:0>
-
2Вау, вот это решение. Я когда делал что-то похожее, не додумался до такого. Век живи век учись!) 6 апр 2017 в 5:29
Атрибут 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;
}
<div class="input" contenteditable="true" placeholder="John Doe"></div>
А конкретно по вашему донору significa.pt/enquiry/
- там нет форм и инпутов, но по сабмиту собираются данные из заполнявшихся клиентом div'ов, пакуются в json и ajax'ом летят в обработчик.