SQLの窓 イラストAC フリー素材

2014年02月14日

エレメント(主にPRE)を選択状態にする

HTMLやスクリプトでできた部品を埋め込む為に、クリップボードを利用する場合、一般的には テキストエリアにコードを表示させて、ユーザがクリップボードを使いやすいようにするのがコード提供側で最も簡単な方法です。textarea に対して、select メソッドを実行するだけなので、テキストエリアそのものに以下のように仕込むだけです

<textarea onclick="this.select();">この文字列を選択</textarea>
しかし、選択肢としては汎用性を持たせる為に、PRE 要素内を使用するのもいいかと思います。正攻法で実装すると少し面倒ですが、jQuery を使うと汎用性も出て来ます。
エレメント(ここでは PRE)を選択状態にする
ここを選択します
ここの文字列は、CSS の設定によって改行コードを挿入しなくても、自動的に折り返すようになっています。また、overflow: hidden; によって、選択状態を枠の中に納めています。さらに、CSS での効果もいろいろ期待できます。

▲ の正攻法の実装コード
<a
	href='javascript:void(0);'
	onclick='
		if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
			var s = document.selection;
			var range = s.createRange( );
			range.moveToElementText(document.getElementById("my_src"))
			range.select();
		}
		else {
			var s = window.getSelection();
			s.selectAllChildren(document.getElementById("my_src"));
		}
	'
>エレメント(ここでは PRE)を選択状態にする</a>
<style>
#my_src {
	white-space: pre;
	white-space: pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
</style>
<pre id="my_src" style="width:400px;border: 1px solid #000000;padding:10px;">
ここを選択します
</pre>

indexOf("microsoft") > -1 に関しては、IE10 までの対応です。IE11 からは下のほうの処理が実行されます( 元々この処理方法は、Microsodt 製品内で行っていたので、それにあわせて IE11 での仕様変更で microsoft の文字列がなくなっており、選択処理の仕様も他のブラウザと同じになりました )

以下のように jQuery を使うと若干記述が簡潔になります。
jQueryで選択状態にする
ここを選択します
ここの文字列は、CSS の設定によって改行コードを挿入しなくても、自動的に折り返すようになっています。また、overflow: hidden; によって、選択状態を枠の中に納めています。さらに、CSS での効果もいろいろ期待できます。
<style>
#my_src2 {
	white-space: pre;
	white-space: pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
</style>

<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<script>
$(function(){
	$("#click_text").click(function(){
		if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
			var s = document.selection;
			var range = s.createRange();
			range.moveToElementText($("#my_src2")[0]);
			range.select();
		}
		else {
			var s = window.getSelection();
			s.selectAllChildren($("#my_src2")[0]);
		}
	}).css({ cursor: "pointer", textDecoration: "underline" });
});
</script>

<span id="click_text">jQueryで選択状態にする</span>
<pre id="my_src2" style="width:200px;border: 1px solid #000000;padding:10px;">
ここを選択します
ここの文字列は、CSS の設定によって改行コードを挿入しなくても、自動的に折り返すようになっています。また、overflow: hidden; によって、<strong><span style="color:#CB0032;">選択状態を枠の中に納めています。</span></strong>さらに、CSS での効果もいろいろ期待できます。
</pre>



【JavaScriptの最新記事】
posted by at 2014-02-14 21:50 | JavaScript | このブログの読者になる | 更新情報をチェックする


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX