読者です 読者をやめる 読者になる 読者になる

テキストボックス内でカーソル位置を移動する方法

[programming]
スポンサーリンク

テキストボックス内のカーソル位置を末尾に設定する方法を調べてみました。

IE 6.0、Opera 8.5 の場合

var elm = document.getElementById('text'); // テキストエリアのelement取得
elm.focus(); // Operaの為(IEでは無くても大丈夫)

var range = elm.createTextRange();
range.move('character', elm.value.length);
range.select();

当初、elm.focus()は入れてなかったのですが、Operaではこうしないとちゃんとカーソルが移動してくれません。(この動きに悩まされました)
IEだと、range.select()で、フォーカスが移動し、カーソル位置もちゃんと末尾に行くのですが、Operaだと、フォーカスは移動するが、テキストの内容が全て選択された状態になってしました。

ちなみに、部分的な文字のみ選択された状態にしたい場合、range.moveStart()、range.moveEnd()が使えます。

FireFox 1.5 の場合

var elm = document.getElementById('text'); // テキストエリアのelement取得
elm.focus();

elm.setSelectionRange(elm.value.length, elm.value.length);

setSelectionRange()で、開始位置と終了位置を同じにすることにより、テキストが選択されずにカーソル位置を指定することが出来ます。

クロスブラウザを考慮した場合

Oepraでは、createTextRange、setSelectionRangeの両方が実装されています。
が、OperaのsetSelectionRangeでは、startとendの差が0以下になるような指定だと、ちゃんとカーソルが指定されず、テキストの内容が全選択されてしまいます。
setSelectionRange自体、テキストの範囲選択のためのメソッドだと思うので、Operaの実装が悪いわけでも無いような気がします。

上記をまとめて、クロスブラウザ対応っぽくすると、下記のような感じになると思います。

var elm = document.getElementById('text'); // テキストエリアのelement取得
elm.focus();

if (elm.createTextRange) {
  var range = elm.createTextRange();
  range.move('character', elm.value.length);
  range.select();
} else if (elm.setSelectionRange) {
  elm.setSelectionRange(elm.value.length, elm.value.length);
}

Safariは試せていないですが、Safari 2.0.3で、setSelectionRangeがサポートされたらしいので、同じようなことが出来るかもしれません。