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

210

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>

Синонимизатор для текста на русском языке

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

Все вопросы

ТОП-10

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

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

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

223

javascript