JavaScript(jQuery)でテキストを選択してコピペしやすくする

営業支援ツールなどの管理画面系のコーディングをしていると、
定型文や、複雑なURLなど画面内の文字列をコピーしたいケースが多々あります。

そんな悩みを解決してくれるコードを紹介します。

目標は、指定された文字または範囲がクリックされた際に文字を選択された状態にします。

下記内容を応用すれば、比較的容易に範囲選択＆コピーの処理が組めて、
ユーザビリティのUPに貢献できること間違いなしです。

Input、textareaの文字列指定

まずは、基本的な、「input」「textarea」などの入力フォームタグのvalueの文字列を指定するコードです。

<input type="text" id="yonaha" value="フリーランスエンジニア募集">
<textarea id="adan">お問い合わせは「info@adan.jp.net」まで</textarea>

<script>
$(function () {
	$('#yonaha').on('click', function () {
		$(this).select();
		return false;
	});
	$('#adan').on('click', function () {
		$(this).select();
		return false;
	});
});
</script>

Divタグや、SPANタグでの範囲指定

Divタグや、SPANタグでの範囲指定は、ちょっとむずかしいです。

おそらくjQueryでは便利そうな処理は用意されていないようで、JacaScriptを直接記入しないと実現しないらしいです。

<div id="target_div">あいうえお</div>

<script>
$(function () {
	$('#target_div').on('click', function () {
		var range = document.createRange();
		// 範囲の指定
		range.selectNodeContents(this);
		// Selectionオブジェクトを返す。ユーザが選択した範囲が格納されている
		var selection = window.getSelection();
		// 選択をすべてクリア
		selection.removeAllRanges();
		// 新規の範囲を選択に指定
		selection.addRange(range);
	});
});
</script>

※参考URL「クリックしたタグの領域を選択状態にする(jQuery対応)」

クリップボードにコピーする場合

範囲選択の目的はコピーアンドペーストなので、コピーの処理まで実装してあげましょう（必要であれば）

コピーの処理自体はとても簡単で、範囲選択された状態で、
document.execCommand(‘copy’);
を、実行してあげるだけでクリップボードへコピーできます。

<input type="text" id="yonaha" value="フリーランスエンジニア募集">
<textarea id="adan">お問い合わせは「info@adan.jp.net」まで</textarea>
<div id="target_div">あいうえお</div>

<script>
$(function () {
	$('#yonaha').on('click', function () {
		$(this).select();
		//※そのままクリップボードにコピーする場合はexecCommand('copy')を実行
		document.execCommand('copy');
		return false;
	});
	$('#adan').on('click', function () {
		$(this).select();
		//※そのままクリップボードにコピーする場合はexecCommand('copy')を実行
		document.execCommand('copy');
		return false;
	});
	$('#target_div').on('click', function () {
		var range = document.createRange();
		// 範囲の指定
		range.selectNodeContents(this);
		// Selectionオブジェクトを返す。ユーザが選択した範囲が格納されている
		var selection = window.getSelection();
		// 選択をすべてクリア
		selection.removeAllRanges();
		// 新規の範囲を選択に指定
		selection.addRange(range);
		//※そのままクリップボードにコピーする場合はexecCommand('copy')を実行
		document.execCommand('copy');
	});
});
</script>

現在のところ、Chromeブラウザでしか試していないですが、あしからず。IEとか怪しいと思います。

問題点：クリップボードにコピーされたことに気が付かない。。。

実際に範囲選択された瞬間にコピーされたとしても、ユーザは気が付かない。

実は作った本人もコピーされたか気が付きにくいです。

なので、クリップボードにコピー後にアラートを出してあげる優しさを出してあげましょう。

<input type="text" id="yonaha" value="フリーランスエンジニア募集">
<div id="copy_alert" style="display:none;">コピーが完了しました。</div>

<script>
$(function () {
	$('#yonaha').on('click', function () {
		$(this).select();
		//※そのままクリップボードにコピーする場合はexecCommand('copy')を実行
		document.execCommand('copy');
		//ふわっと現れてふわっと消えるやつ
		$('#copy_alert').fadeIn("slow", function () {
			$(this).delay(1000).fadeOut("slow");
		});
		return false;
	});
});
</script>

jQueryで、ふわっと現れてふわっと消えるやつ