раскрыть 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: предыстория задачи - писать код для вывода без замены <> на <> |
Цитата:
|
Цитата:
<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-метрики
Чуть ниже на странице: "Нажмите на кнопку, чтобы распахнуть элемент:" |
Цитата:
- див располагают "под" текстареа - все установки по отступам, полям и шрифтам у них одинаковы - ввод в текстареа дублируют и в див, при этом считываются размеры дива и присваиваются текстареа Т.о. их размеры будут кагбэ равны... |
Цитата:
<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>
|
Цитата:
но больше волнует то, что скрипт в диве ведь начинает исполняться |
Цитата:
Т.о. див находится именно "под" текстареа и его не видно. |
Цитата:
через scrollHeight очевидно самый лучший вариант Цитата:
PS: вообще так-то идея привлечения textarea была не в этой задаче, а в том, что htmtl-коде в тегах textarea пишем js-код в чистом виде (без ручных замен <> на <> ) далее программно делаем эти замены, переносим в html и делаем подсветку (textarea соответственно скрываем/удаляем) |
bes,
Можно без замены <> на <> использовать стандартный метод document.createTextNode(text) который отобразит содержимое просто как текст. http://learn.javascript.ru/task/crea...e-vs-innerhtml |
круто :thanks:
|
<style>
textarea.code {
display: block;
color: maroon;
font-weight: bold;
resize: none;
overflow: hidden;
outline: none;
border: none;
}
</style>
<textarea class="code">
<script>
(function () {
var ta = document.querySelectorAll('textarea.code');
var len = ta.length;
var par, el, pre;
for (var i = 0; i < len; i++) {
el = ta[i];
el.wrap = "off";
el.readonly = "readonly" ;
el.style.height = ta[i].scrollHeight + 'px';
el.style.width = ta[i].scrollWidth + 'px';
par = el.parentNode;
pre = document.createElement('pre');
pre.appendChild(document.createTextNode(el.value));
par.replaceChild(pre, el);
}
})();
</script>
</textarea>
<script>
window.onload = function () {
var ta = document.querySelectorAll('textarea.code');
var len = ta.length;
var par, el, pre;
for (var i = 0; i < len; i++) {
el = ta[i];
el.wrap = "off";
el.readonly = "readonly" ;
el.style.height = ta[i].scrollHeight + 'px';
el.style.width = ta[i].scrollWidth + 'px';
par = el.parentNode;
pre = document.createElement('pre');
pre.appendChild(document.createTextNode(el.value));
setTimeout(function() {par.replaceChild(pre, el);}, 3000);
}
}
</script>
|
Насчёт табов: по ходу только так
<textarea rows="6" cols="30">
<script>
alert();
alert();
</script>
</textarea>
<textarea class="code" rows="6" cols="30">
<script>
alert();
alert();
</script>
</textarea>
<script>
window.onload = function () {
var ta = document.getElementsByClassName('code')[0];
ta.value = ta.value.replace(/\t/g, ' ');
}
</script>
|
| Часовой пояс GMT +3, время: 09:39. |