Всем приветы и ответы!
И в сегодняшнем решении для вашего сайта, у нас интересное пополнение!
По заголовку поста, вы уже поняли, что речь пойдёт про HTML тег textarea, который отвечает за форму отправления сообщений на сайте!
И в данном примере, высота поля будет меняться автоматически и не будет появляться с правой стороны полоса прокрутки!
Но довольно слов, смотрим на готовый код!
HTML каркас
Для начала, нам надо HTML тегу textarea прописать нужный класс, в данном примере это cell-textarea, он будет прописан и в JS ниже:
<textarea class="cell-textarea" rows="1"></textarea>
Пропишем JS
Теперь, в самый низ страницы, перед закрывающим тегом </body> установим вот такой JS:
<script>
document.querySelectorAll('.cell-textarea').forEach(el => {
el.style.height = el.setAttribute('style', 'height: ' + el.scrollHeight + 'px');
el.classList.add('auto');
el.addEventListener('input', e => {
el.style.height = 'auto';
el.style.height = (el.scrollHeight) + 'px';
});
});
</script>
CSS стили
И в завершении этого решения, в файл под названием style.css в самый низ установим следующие стили:
.cell-textarea {
resize: none;
&.auto {
overflow-y: hidden;
}
}
.cell-textarea {
float:left;
width:100%;
-webkit-appearance: none;
box-sizing: border-box;
outline: none;
font-family: Verdana,Arial,Helvetica, sans-serif;
font-size: 16px;
line-height: 1.8;
color:#555;
padding: 30px 30px;
border-radius: 15px;
color: #404660;
border: none;
background: #fbfbfb;
transition: box-shadow .25s;
box-shadow: inset 0 0 0 1px var(--border-color, #E1E6F9), 0 0 0 3px var(--focus-color, transparent);
&:focus {
--focus-color: #ECEFFC;
}
&:focus,
&:hover {
--border-color: #BBC1E1;
}
}
На этом у меня всё! Удачных HTML решений!
Интересное решение, здорово вы реализовать у себя на сайте, а то у меня высота поля 200пх, неудобно с планшета оставлять комментария.
Значение 200 очень мало, особенно если у вас большой шрифт, может поставить 250-300?