раскрыть textarea
 

Как более эффективно раскрыть textarea на максимальную высоту и ширину его содержимого?

Моё замудрёное решение.

<style>
#test {
	resize: none;
	overflow: hidden;
	outline: none;
	border: none;
}
</style>

<textarea id="test" wrap="off" readonly="readonly">
<script>
	window.onload = function () {
		alert('hy');
	}
</script>
</textarea>

<script>
window.onload = function () {
	var ta = document.getElementById('test');
	var mas = ta.value.match(/(?=^).*(?=$)/gm);
	ta.rows = mas.length;
	 ta.cols = mas.map(function (el) {
			return el.length;
		}).sort(function (a, b) {
			return b - a;
		})[0] + 10; //поправка, так как часть текста оказывается закрытой
}
</script>

Попутные вопросы:
- можно ли в textarea настроить размер табуляции?
- есть ли css-аналоги wrap="off" и readonly="readonly"?

PS: предыстория задачи - писать код для вывода без замены <> на &lt;&gt;

До этого предлагался вариант с ДИВом в который пишется тот же контент... Размер дива "передавался" текстареа...

можно поподробней об этом варианте (или ссылку)

<div id="div">
<script>
	alert('как быть');
	window.onload = function () {
		alert('hy');
	}
</script>
</div>
<textarea id="test" wrap="off" rdeadonly="readonly">
</textarea>

<script>
window.onload = function () {
	var ta = document.getElementById('test');
	var div = document.getElementById('div');
	ta.value = div.innerHTML;
}
</script>

bes, http://learn.javascript.ru/metrics#javascript-метрики
Чуть ниже на странице: "Нажмите на кнопку, чтобы распахнуть элемент:"

Идея там была такая...
- див располагают "под" текстареа
- все установки по отступам, полям и шрифтам у них одинаковы
- ввод в текстареа дублируют и в див, при этом считываются размеры дива и присваиваются текстареа

Т.о. их размеры будут кагбэ равны...

ха, спасибо, сразу не сообразил применить этот способ для textarea, хотя не раз уже применял для других элементов (видимо из-за мысли, что он не совсем обычный :D )

<style>
#test {
	resize: none;
	overflow: hidden;
	outline: none;
	border: none;
}
</style>

<textarea id="test" wrap="off" readonly="readonly">
<script>
	alert();
	window.onload = function () {
		alert('hy');
	}
</script>
</textarea>

<script>
window.onload = function () {
	var ta = document.getElementById('test');
	var div = document.getElementById('div');
	ta.style.height = ta.scrollHeight;
	ta.style.width = ta.scrollWidth;
}
</script>

не совсем понял, "под" - это между :) (тегами <textarea></textarea>)

но больше волнует то, что скрипт в диве ведь начинает исполняться

У них z-index разный, ну и позиционирование конечно...
Т.о. див находится именно "под" текстареа и его не видно.

понял, о чём речь

через scrollHeight очевидно самый лучший вариант

как насчёт этого? пока поиски приводят к выводу, что никак


PS: вообще так-то идея привлечения textarea была не в этой задаче, а в том, что htmtl-коде в тегах textarea пишем js-код в чистом виде (без ручных замен <> на &lt;&gt; )
далее программно делаем эти замены, переносим в html и делаем подсветку (textarea соответственно скрываем/удаляем)

bes,

Можно без замены <> на &lt;&gt; использовать стандартный метод

document.createTextNode(text)

который отобразит содержимое просто как текст.

http://learn.javascript.ru/task/crea...e-vs-innerhtml