JavaScript で入力欄のカーソル位置を指定する

何をしたかったの?

入力欄に "" を入れて、その間に入力のカーソルが入る、みたいな状態を作りたかった。次のようになる。

どんな風に書いたのか

とりあえず jQuery を読み込む。別に jQuery を使わなくても input に使っている DOM が取れればなんでもいい。jQuery が簡単、というだけの話。

さらに、入力欄を作る。実行ボタンはとりあえずトリガーになるものが欲しいから入れているだけ。実際に使うとしたらショートカットボタンとかにバインドすることになりそう。

<input type="text" id="js-cursor-position-control-sample-input" />
<input type="button" id="js-cursor-position-control-sample-button" value="実行" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

JS を仕込む。やることは以下の4つ

1. トリガーとなる何かにイベントをバインドする。今回は button にした input 要素
2. 入力欄にテンプレートとなる文字列を入れる。今回は ""
3. 入力欄にフォーカスさせる
4. カーソルの位置を設定する。DOM の setSelectionRange を使い、1文字目の所から1文字目の所を選択する。つまり、0文字目と1文字目の間から0文字目と1文字目の間が選択されるので、文字はとくに選択されず、カーソルがそこに移動するだけ、となる。

var $button = $("#js-cursor-position-control-sample-button");
var $input = $("#js-cursor-position-control-sample-input");

$button.click(function(e){
  $input.val('""');
  $input.focus();
  $input.get(0).setSelectionRange(1, 1);
});

setSelectionRange

この記事を書いている時点ではHTMLInputElement.setSelectionRange() - Web API インターフェイス | MDN も日本語訳されてなかった。あまり使われてないのだろうか。3つの引数をとる関数である。

1. 開始地点
2. 終了地点
3. 選択した方向 (オプショナル)

今回の使い方では第三引数は関係ない。第三引数は文字列の先頭/終端のどっち側から選んで選択されたかを示す。わかりやすい例では Shift キーを押したまま選択する場所を変えるとどう挙動するか、があるだろうか。

特定文字列を選択させてコピペを促したりするのに便利そうである。