[ jQuery ] テキストエリア以外でも、テキスト選択をする
テキストエリアなどでテキスト全体を選択したい場合、jQueryでは「$(this).select();」などとすればOKです。しかし、このselectは、インプットタイプがテキストであるか、テキストエリアに対してしか使えません。他の要素のテキストを選択することはできないんですよね。ここでは、他の要素のテキストでも選択できる方法を書いていきます。
完成版
いきなりですが、完成版を書いておきます。selectTargetというidの要素をクリックすると、targetというidの要素内のテキストが選択される、という内容になっています。#targetはテキストエリアでなくても、例えばdivなどの要素でもOKです。
$('#selectTarget').click(function(){
var range = document.createRange();
var element = document.getElementById('target');
range.selectNodeContents(element);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
});
解説
以下、簡単な解説を書きます。一般のタグ内のテキストを選択するには、「選択したい範囲の指定」「その範囲を選択」の2つのステップがあります。
選択したい範囲の指定
「選択したい範囲の指定」を行うには、まず範囲を扱うRangeオブジェクトを作り、それに範囲を設定する、という流れになります。Rangeオブジェクトは、documentの持つcreateRangeというメソッドを使って取得します。
var range = document.createRange();
範囲の設定の仕方は、範囲のスタートとエンドを指定するという方法でもいいのですが、めんどくさいです。範囲を指定する方法として、「この要素の中身全部」という指定ができるので、それを利用します。Rangeの持つselectNodeContentsというメソッド使います。
var element = document.getElementById('target');
range.selectNodeContents(element);
これで、targetというidを持った要素の内側にあるテキスト範囲が取得できました。
範囲の選択
さて、上で範囲が取得できたので、次は選択をします。選択は、Selectionというまた違ったオブジェクトを利用します。getSelectionを使って、次のようにしてSelectionオブジェクトを取得します。
var selection = window.getSelection();
これにaddRangeで選択したいRangeを追加すれば、対応する範囲が選択されます。ここでは一度すべて初期化するremoveAllRangesを実行してから、addRangeを行っています。
selection.removeAllRanges(); selection.addRange(range);
これらをつなげて、上の完成形のできあがりです。