2014/10/31

[ 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);

これらをつなげて、上の完成形のできあがりです。

前の記事:
次の記事: