Как можно увеличить textarea по мере заполняемости с помощью javascript?
3 ответа
Первый вариант:
P.S. С помощью атрибута contenteditable
div {
border: 1px solid;
}
<div contenteditable></div>
Второй вариант:
var textarea = document.getElementsByTagName('textarea')[0];
textarea.addEventListener('keydown', resize);
function resize() {
var el = this;
setTimeout(function() {
el.style.cssText = 'height:auto; padding:0';
el.style.cssText = 'height:' + el.scrollHeight + 'px';
}, 1);
}
textarea {
width: 100%;
resize: none;
}
<textarea rows="1"></textarea>
Один из вариантов...
var tx = document.getElementsByTagName('textarea');
for (var i = 0; i < tx.length; i++) {
tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
tx[i].addEventListener("input", OnInput, false);
}
function OnInput() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}
.moka {
font-family: Consolas;
font-size: 16px;
height: auto;
border: 1px solid #e4dcdc;
border-radius: 5px;
overflow: hidden;
}
<textarea class="moka">Привет
как
дела?</textarea><br>
<textarea class="moka">Все
в
норме</textarea>
DEMO - для экспериментов на codepen.io
P.S. Код был немного модернизирован...
Пример так, для коллекции.
var textarea = document.getElementsByTagName('textarea')[0];
/*
Чтобы получить необходимы результат (автоматическая высота textarea)
и исключить костыльный подход с setTimeout в теле инструкции обработчика
resize, лучше подписать на событие input вместо keydown
*/
textarea.addEventListener('input', resize);
function resize(_e) {
var event = _e || event || window.event;
var getElement = event.target || event.srcElement; // var el = this;
/* для сброса фантомной высоты от бордера :) и если направление на уменьшение строк */
getElement.style.height = "auto";
/* вычисление и присвоение высоты */
getElement.style.height = Math.max(getElement.scrollHeight, getElement.offsetHeight)+"px"
}
textarea {
width: 100%;
resize: none;
max-height: 100px;
-off-padding:0
}/*-off- --- кастомный маркер для экранирование лишних CSS свойств*/
div {
position: relative;
overflow: auto;
border: 1px solid;
max-height: 100px;
}
<div contenteditable></div>
<textarea rows="1"></textarea>