JavaScript/DOM操作/テキストエリア操作

JavaScript/DOM操作/テキストエリア操作

テキストエリアの内容を取得する

全部

テキストエリアの内容はズバリタグに挟まれている内部なのだが、これは特別に 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));

特定の位置までスクロールする(Firefox編)

ちょっと操作が特殊らしく、どのブラウザでも同じように動作しないっぽい。

特定の位置までスクロールするには、その内容の位置を選択状態にもっていけばできるらしくそのように記述する。

しかしそれだと、スクロール位置がテキストエリアの下端部までしかこないので、上端までスクロールさせるために 一旦最後までスクロールした後に、上に戻るという記述をする。

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編)

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 を全部入れ直してしまうので、入れ直した後はカーソルがテキストエリア末尾になってしまうので、それを挿入位置に戻している。

javascript/ope/dom_ope/textarea.txt · 最終更新: 2020-05-19 19:45 by ore