Увеличение textarea по мере заполняемости - javascript

#javascript #html #textarea

Как можно увеличить textarea по мере заполняемости с помощью javascript?
    

Ответы

Ответ 1

Первый вариант: 
P.S. С помощью атрибута contenteditable



div {
  border: 1px solid;
}





Второй вариант:



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;
}



Ответ 2

Пример так, для коллекции.



var textarea = document.getElementsByTagName('textarea')[0];
/*
 Чтобы получить необходимы результат и исключить костыльный подход
   с 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 = Math.max(getElement.scrollHeight, getElement.offsetHeight)+"px"
		}
textarea {
  width: 100%;
  resize: none;
  max-height: 100px;
  -off-padding:0
}
div {
	position: relative;
	overflow: auto;
	border: 1px solid;
	max-height: 100px;
}




Ответ 3

Oдин из вариантов:



var Q;
Q = {};
Q.elem = document.querySelector('.input-0');
Q.heightPlus = 12;

var autoExpand = function() {
	Q.elem.style.height = 'inherit';
	var height = Q.elem.scrollHeight + parseInt(Q.heightPlus);
	Q.elem.style.height = height + 'px';
};

document.oninput = function() {
	autoExpand();
}

window.addEventListener('DOMContentLoaded', function() {
	autoExpand();
});
textarea {
	min-height: 5em;
	max-height: 50vh;
	width: 100%;
}



Ответ 4

Еще один из вариантов:
Плавное изменением высоты textarea по мере заполняемости...



var Q;
Q = {};
Q.inTime = 50;
Q.inPlus = 15;
Q.elem = document.querySelector('.input-0');
Q.elemTmp = document.querySelector('.input-tmp');
Q.scrollHeightInfo;
Q.scrollHeightTmp = 0;
Q.timeInterval;

window.addEventListener('DOMContentLoaded', function() {
	autoExpand();
});

document.oninput = function() {
	autoExpand();
};

var autoExpand = function() {
	Q.elemTmp.value = Q.elem.value;
	Q.elemTmp.style.height = 'inherit';
	Q.scrollHeightInfo = Q.elemTmp.scrollHeight + parseInt(Q.inPlus);
	if (Q.scrollHeightTmp === 0) {
		Q.scrollHeightTmp = Q.inPlus * 2;
		Q.elem.focus();
	} else timeIntervalStart();
};

function timeIntervalStart() {
	if (Q.scrollHeightInfo === Q.scrollHeightTmp) {
		clearTimeout(Q.timeInterval);
	}
	Q.timeInterval = setTimeout(function() {
		if (Q.scrollHeightTmp < Q.scrollHeightInfo) {
			Q.scrollHeightTmp++;
		}
		if (Q.scrollHeightTmp > Q.scrollHeightInfo) {
			Q.scrollHeightTmp--;
		}
		Q.elem.style.height = Q.scrollHeightTmp + 'px';
		timeIntervalStart();
	}, Q.inTime);
}
textarea {
	min-height: 5em;
	max-height: 50vh;
    width: 100%;
}