menu
書いてる野郎
orebike@gmail.com
テキストエリアの内容はズバリタグに挟まれている内部なのだが、これは特別に value で取得できる。
var ta = document.getElementById("#hoge"); console.log(ta.value);
そういうAPIは無いので結局、選択範囲の位置と内容を見て手動で切り取る
var ta = document.getElementById("#hoge"); var start = ta.selectionStart; var end = ta.selectionEnd; console.log(ta.value.slice(start, end));
ちょっと操作が特殊らしく、どのブラウザでも同じように動作しないっぽい。
特定の位置までスクロールするには、その内容の位置を選択状態にもっていけばできるらしくそのように記述する。
しかしそれだと、スクロール位置がテキストエリアの下端部までしかこないので、上端までスクロールさせるために 一旦最後までスクロールした後に、上に戻るという記述をする。
var ta = document.getElementById("#hoge"); var start = ta.value.indexOf("なにか"); //最下端までまず移動する ta.selectionStart = ta.value.length; ta.selectionEnd = ta.value.length; //その後若干間をあけて上に引き戻す setTimeout(function(){ ta.selectionStart = start; ta.selectionEnd = start; }, 500);
Chrome は Firefox とちょっと挙動が違う 特定の位置までスクロールするには、その内容の位置を選択状態にもっていけばできるらしくそのように記述する。
しかしChrome はフォーカスをコントロールしてやらないと反映されないようなのでちょっとぐちゃぐちゃする。
var ta = document.getElementById("#hoge"); var start = ta.value.indexOf("なにか"); ta.focus(); ta.selectionStart = start; ta.selectionEnd = start; ta.blur(); ta.focus();
なぜこのような操作でこのような挙動になるかは不明。 Chrome の場合指定するとその位置が textarea の真ん中あたりに調整されるので Firefox のような位置合わせは不要。
簡単にできそうだが、実はそんなにスマートにはできない。 操作としては、カーソルの前部分とカーソルの後ろ部分を別々に取得しそれで挿入したいテキストを挟んで入れ直すということをやる。
function insertTextToCursorPosition(domTextarea, text){ var curPosi = domTextarea.selectionStart; var curPosiTagInserted = curPosi + text.length; domTextarea.value = domTextarea.value.substr(0, curPosi) + text + domTextarea.value.substr(domTextarea.selectionStart, domTextarea.value.length); domTextarea.setSelectionRange(curPosiTagInserted, curPosiTagInserted); }
value を全部入れ直してしまうので、入れ直した後はカーソルがテキストエリア末尾になってしまうので、それを挿入位置に戻している。