HTMLエディタを自作しているんですが、テキストエリアの中の文字列を検索したとき、その位置にテキストのスクロールバーを移動させたい。
textarea のスクロールバーで検索すると 表示、非表示関連および、最下部への移動って記事が多くてめっちゃ苦労しました。
要素として
・textarea のスクロールバーの位置を動かす
・スクロールバーをどのぐらい動かせるんだ？
textarea のスクロールバーの位置を動かす
これは、案外簡単。0001var docelm = document.getElementById(′doc′);
0002docelm.scrollTop = 動かしたい量;
scrollTop と言うのが味噌で、この scrollTop は、隠れた部分を含めた量を指定できます。Textarea には、エリアそのものの高さと、隠れた部分の高さがあります。
テキストエリアそのものの高さは clientHeight
隠れた部分の高さは scrollHeight
のプロパティでそれぞれ求められます。
ex.
0001var docelm = document.getElementById(′doc′);
0002alert(docelm.clientHeight);
0003alert(docelm.scrollHeight);
※全然隠れた部分がない場合、clientHeightとscrollTopは同じ高さになります。話を戻して ScroolTop で指定する値は scrollHeight の方で指定します。
ということは、全体行数がわかって、移動させたい行がわかれば・・・
スクロール量 = ( scrollHeight / 全体行数 ) * 移動させたい行
で求めることができます。
つまりこういうソースになります。
0001function bx_scroll(lines)
0002{
0003// 指定行へスクロール
0004var docelm = document.getElementById(′doc′);
0005var scrollsize = docelm.scrollHeight/textLineCount();
0006docelm.scrollTop = scrollsize * lines;
0007}
0008function textLineCount()
0009{
0010// 全体行数を求める
0011var docelm = document.getElementById(′doc′);
0012var buff = docelm.value;
0013
0014num = buff.match(/\r\n|\n/g);
0015if(num!=null){
0016line = num.length +1;
0017}else{
0018line = 1;
0019}
0020return(line);
0021}
検索した文字列のある行へtextarea のスクロールバーを移動させる
指定した行へスクロールさせることができれば、あとは検索をかけてその行が何行目にあるか調べれば済みます。
ソースはこんな感じ
0001function SearchScroll(searchStr)
0002{
0003var docelm = document.getElementById(′doc′);
0004var linebf = docelm.value.split(′\\n′);
0005var i;
0006
0007for(i=0;i<linebf.length;i++){
0008if( linebf[i].indexOf(searchStr)>=0 ){
0009bx_scroll(i);
0010return;
0011}
0012}
0013alert(′見つかりませんぜ？′);
0014}
わかってしまえばなんてことはなかった。あなたの作業の一助になれば幸いです。