Пытаюсь сделать динамическое изменение высоты в textarea при наборе текста. Сначала поле маленькое, а по мере того, как пользователь вводит данные, поле растет в ширину.
Использую для этого вот такой код:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {
height: 30px;
border: 1px solid #dedede;
border-radius: 4px;
width: 400px;
outline: none;
box-sizing: border-box;
padding: 6px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<textarea></textarea>
</div>
<script type="text/javascript">
let textarea = document.querySelector('textarea');
textarea.onkeyup = e => {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
}
</script>
</body>
</html>
Суть в том, что в момент ввода в текстовое поле, у него устанавливается высота 'auto', то есть оно растягивается в высоту на высоту контента. Затем эту высоту получаю через scrollHeight и устанавливаю этому текстовому полю в качестве значения heught.
Все отлично работает, кроме ситуации, когда я все стер. Когда я все стер и поле пустое, выставляется значение height:auto и scrollHeight равен 42. Почему 42, мне неясно. Высота блока по умолчанию 30. Как это можно исправить, чтобы если поле пустое, высота была 30?
Вот
codepen с кодом.
Простой
Средний
