Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Как можно программно проскроллить textarea ?

Автор: BrainWorker 15.8.2007, 11:04

Вот собственно сабж.

Имеется textarea с текстом, которого достаточно много, чтобы отображалась полоса прокрутки для навигации.
И также имеется выделение - допустим, юзер выделил слово мышкой, после чего проскролил всё содержимое вниз (или куда угодно, так что в окне textarea выделения не видно).

Как можно программно проскроллить textarea до выделенного текста, чтобы было видно выделение?

Автор: Astraller 15.8.2007, 11:10

Код


document.getElementById('textareaId').scrollTop += 1000000;

Автор: BrainWorker 15.8.2007, 11:19

Цитата(Astraller @ 15.8.2007, 11:10)

Код


document.getElementById('textareaId').scrollTop += 1000000;

Не понял! Это то тут причем???

естественно не пашет smile

Автор: Astraller 15.8.2007, 11:23

А http://www.museum-of-money.org/tmp/textar.php пашет. К чему бы это?

Автор: BrainWorker 15.8.2007, 11:30

не знаю к чему, но, извини, не пашет ни под каким браузером.

да и вообще какой смысл к scrollTop'у добавлять большое число, чтобы прокрутить до определенной позиции?

Автор: Astraller 15.8.2007, 11:33

Э.. собственно пример лишь крутит скролбар на 1 000 000 пикселей в низ. Т.е. до упора smile

А уж как определить строку с выделением в textarea информации в google предостаточно smile

PS Не надо искать черную кошку в тёмной комнате, особенно если её там нет smile

Автор: BrainWorker 15.8.2007, 11:47

Цитата(Astraller @ 15.8.2007, 11:33)

Э.. собственно пример лишь крутит скролбар на 1 000 000 пикселей в низ. Т.е. до упора smile

А уж как определить строку с выделением в textarea информации в google предостаточно smile

PS Не надо искать черную кошку в тёмной комнате, особенно если её там нет smile

Нет, возможно, я не правильно выразился, так что прошу прощения.

Как узнать, какой текст выделен юзером, я знаю. Задача в другом - надо проскроллить textarea, чтобы было видно выделение, когда оно не видно

1) имеется текст в textarea, и выделение в нем

user posted image

2) textarea прокручивается, так что выделения не видно. Допустим вниз (в нашем случае текста достаточно много, что при прокрутке вниз выделения не было видно

user posted image

Необходимо при нажатии на кнопку "Show Selection" программно проскроллить textarea, так чтобы текущее выделение снова было видно. Так как показано на рис.1

Надеюсь понятно объяснил.

Автор: 12345c 15.8.2007, 15:44

Если выделяют всегда вручную, то проще запомнить положение scrollTop, а при прокрутке (onscroll) возвращаться обратно. Если задача посложнее (не возвращаться, если выделение не ушло, то для IE-Opera есть ряд свойств с TextRange (boundingHeight , boundingWidth , boundingLeft, boundingTop ), из которых (t-range взят отн-о t-area) берётся, насколько прокрутить. Для FF сразу не скажу.

Автор: _Nikolas_ 15.8.2007, 21:24

В опере насколько знаю прокрутка в текстареа не работает вообще.
Вот код, в фф работает:

Код


<html>
   <body>
  <textarea id="t1" rows="10" cols="40" onSelect="mup()">
 some text
wtrwer
sfdgsdfg
dfgdfg
dfgdfg
dfgdfg
dfgdfg
dfgdfg
dfgdfgdfhhhhhjgk
hjklhjkhj
kfgfdhfghf
ghfgbnfgbfgbfg
hfghfghfgbfgbfg
bfgbfgbbfgb
fgbfgbfgbfgb
fgbfgbfghjjjjjjjjkhj
khjkhjkhjk
hjk
  </textarea>
  <button onclick="scroll()">scroll</button>
  </body>
  <script>
    t1=document.getElementById('t1');
    sc=0;
    function mup() {
        sc=t1.scrollTop;
    }
    function scroll() {
        t1.scrollTop=sc;
    }
  </script>
</html>

Автор: BrainWorker 15.8.2007, 21:31

Код работает в FF и IE, в опере - нет
Спасибо smile

Хотелось бы также узнать, как можно сделать то же самое, но при выделении не вручную, а программно. Т.е. допустим мне надо в тексте выделить кусок с 30-го по 50-й символ и при необходимости проскроллить textarea, чтобы он (кусок) был виден.

Автор: _Nikolas_ 16.8.2007, 16:57

Вот:

Код


<html>
  <script type="text/javascript">
    function scroll() {
     var t = document.getElementById( 't1' );
     var fr = document.getElementById( 'from' );
     var to = document.getElementById( 'to' );
     t.setSelectionRange( parseInt( fr.value ), parseInt( to.value ) );
     var lineHeight = t.scrollHeight / getNumOfLines( t.value );
     var lineNumber = getNumOfLines( t.value.substring( 0, parseInt( fr.value ) ) ) - 2;//поидее правильно 1, но тогда прокручивает к самой строчке и иногда чуток ее захватывает
        t.scrollTop = lineHeight * lineNumber;
        t.focus();
    }
    function getNumOfLines( str ) {
     return str.replace( /\s+$/g,"" ).split( "\n" ).length;
    }
</script>
   <body>
  <textarea id="t1" rows="10" cols="40">
 some text
wtrwer
sfdgsdfg
dfgdfg
dfgdfg
dfgdfg
dfgdfg
dfgdfg
dfgdfgdfhhhhhjgk
hjklhjkhj
kfgfdhfghf
ghfgbnfgbfgbfg
hfghfghfgbfgbfg
bfgbfgbbfgb
fgbfgbfgbfgb
fgbfgbfghjjjjjjjjkhj
khjkhjkhjk
sdfsdf
sdfsdf
sdfsdf
hjk
  </textarea>
  from
  <input id="from" value="80">
  to
  <input id="to" value="100">
  <button onclick="scroll()">scroll to selection</button>
  </body>
</html>