Javascript で textarea のスクロールバーを動かす必要が出ました。

HTMLエディタを自作しているんですが、テキストエリアの中の文字列を検索したとき、その位置にテキストのスクロールバーを移動させたい。

textarea のスクロールバーで検索すると 表示、非表示関連および、最下部への移動って記事が多くてめっちゃ苦労しました。

要素として
・textarea のスクロールバーの位置を動かす
・スクロールバーをどのぐらい動かせるんだ？

textarea のスクロールバーの位置を動かす

これは、案外簡単。

	var docelm = document.getElementById('doc');
	docelm.scrollTop = 動かしたい量;

scrollTop と言うのが味噌で、この scrollTop は、隠れた部分を含めた量を指定できます。

Textarea には、エリアそのものの高さと、隠れた部分の高さがあります。
テキストエリアそのものの高さは clientHeight
隠れた部分の高さは scrollHeight
のプロパティでそれぞれ求められます。


ex.

	var docelm = document.getElementById('doc');
	alert(docelm.clientHeight);
	alert(docelm.scrollHeight);

※全然隠れた部分がない場合、clientHeightとscrollTopは同じ高さになります。


話を戻して ScroolTop で指定する値は scrollHeight の方で指定します。

ということは、全体行数がわかって、移動させたい行がわかれば・・・

スクロール量 = ( scrollHeight / 全体行数 ) * 移動させたい行

で求めることができます。

つまりこういうソースになります。

function bx_scroll(lines)
{
	// 指定行へスクロール
	var docelm = document.getElementById('doc');
	var scrollsize = docelm.scrollHeight/textLineCount();
	docelm.scrollTop = scrollsize * lines;
}
function textLineCount()
{
	// 全体行数を求める
	var docelm = document.getElementById('doc');
	var buff = docelm.value;
	
	num = buff.match(/\r\n|\n/g);
	if(num!=null){
		line = num.length +1;
	}else{
		line = 1;
	}
	return(line);
}

検索した文字列のある行へtextarea のスクロールバーを移動させる

指定した行へスクロールさせることができれば、あとは検索をかけてその行が何行目にあるか調べれば済みます。

ソースはこんな感じ

function SearchScroll(searchStr)
{
	var docelm = document.getElementById('doc');
	var linebf = docelm.value.split('\\n');
	var i;
	
	for(i=0;i<linebf.length;i++){
		if( linebf[i].indexOf(searchStr)>=0 ){
			bx_scroll(i);
			return;
		}
	}
	alert('見つかりませんぜ？');
}

わかってしまえばなんてことはなかった。

あなたの作業の一助になれば幸いです。