GINPRO / SQLの窓と銀プログラマ

<textarea onclick="this.select();">この文字列を選択</textarea>

<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>

<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>