Нужно создать поле для ввода текста которое будет автоматически увеличиваться вместе с набранным текстом (по высоте)

184
22 ноября 2017, 01:16

Нужно создать поле для ввода текста которое будет автоматически увеличиваться вместе с набранным текстом (по высоте). Использовать textarea нельзя, тк там есть странный угол который никак не вписывается в дизайн.

Подобная вещь реализована в telegra.ph.

Answer 1

Чтобы убрать странный угол, задайте resize: none

const textarea = document.getElementById('textarea'); 
// Учитываем padding 
const padding = textarea.offsetHeight - textarea.clientHeight; 
 
textarea.oninput = e => { 
    // Схлопываем 
    textarea.style.height = 'auto'; 
    // Расхлопываем 
    textarea.style.height = textarea.scrollHeight + padding + 'px'; 
}
textarea{ 
  resize: none; /* Убираем "Странный угол" */ 
}
<textarea id='textarea'></textarea>

Answer 2
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>contenteditable</title>
  <style>
    div.d1 {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="d1">
    <div contenteditable="true">This is a sample</div>
  </div>
</body>
</html>
READ ALSO
Послать реакту событие об изменении checkbox&#39;а
javascript

Послать реакту событие об изменении checkbox'а

Пытаюсь через dispatchEvent послать событие так, чтобы React его обработал, но по какой-то причине обработчик onChange в реакте не вызывается, хотя все...

 200
Последовательность пайпов ( .pipe() )
javascript

Последовательность пайпов ( .pipe() )

Начал осваивать сборщики проектов, а именно из Gulp

 189
svg/js обратный отсчет
javascript

svg/js обратный отсчет

Как изменить js код так, чтобы по истечении 59 секунд счетчик не замирал на 0 секунде, а начинал заново?

 226
Скрытое свойство [[ErrorData]]
javascript

Скрытое свойство [[ErrorData]]

 222