5

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

1
  • 3
    Посмотреть реализацию на сайте совсем никак? 5 апр 2017 в 20:30

2 ответа 2

10

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

1
  • 2
    Вау, вот это решение. Я когда делал что-то похожее, не додумался до такого. Век живи век учись!) 6 апр 2017 в 5:29
8

Атрибут 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'ом летят в обработчик.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.