Javascript で textarea のスクロールバーを動かす
Javascript で textarea のスクロールバーを動かす必要が出ました。
HTMLエディタを自作しているんですが、テキストエリアの中の文字列を検索したとき、その位置にテキストのスクロールバーを移動させたい。
textarea のスクロールバーで検索すると 表示、非表示関連および、最下部への移動って記事が多くてめっちゃ苦労しました。
要素として
・textarea のスクロールバーの位置を動かす
・スクロールバーをどのぐらい動かせるんだ?
scrollTop と言うのが味噌で、この scrollTop は、隠れた部分を含めた量を指定できます。
Textarea には、エリアそのものの高さと、隠れた部分の高さがあります。
テキストエリアそのものの高さは clientHeight
隠れた部分の高さは scrollHeight
のプロパティでそれぞれ求められます。
ex.
※全然隠れた部分がない場合、clientHeightとscrollTopは同じ高さになります。
話を戻して ScroolTop で指定する値は scrollHeight の方で指定します。
ということは、全体行数がわかって、移動させたい行がわかれば・・・
スクロール量 = ( scrollHeight / 全体行数 ) * 移動させたい行
で求めることができます。
つまりこういうソースになります。
指定した行へスクロールさせることができれば、あとは検索をかけてその行が何行目にあるか調べれば済みます。
ソースはこんな感じ
わかってしまえばなんてことはなかった。
あなたの作業の一助になれば幸いです。
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('見つかりませんぜ?'); }
わかってしまえばなんてことはなかった。
あなたの作業の一助になれば幸いです。
スポンサーリンク