SQLの窓

2014年10月23日


ノーマル JavaScript と比較。jQuery でクリックしたテキスト( SPAN 要素 と INPUT またはテキストエリア ) を選択状態にする

クリックした後、右クリックまたは CTRL+C でそのテキストをクリップボードにコピーする事を想定しています。

jQuery での実装

最新のブラウザならば、SPAN 部分は皆『document.createRange()』で作成されたオブジェクトで正しく動作します。但し、INPUT 等の入力可能な部分での処理は、エレメント(要素)の、setSelectionRange メソッドで対応します。その際、IE8 以前では、createTextRange で処理を行わないと動作しません( ここはいずれ必要なくなる処理です )

これらの処理は、サンプルでは文字列全体の選択を行っていますが、いずれも任意の範囲指定が可能です。

JavaScript のみでの実装

それに対して、JavaScript のみで記述したものは、入力部分を全て選択する場合は要素に直接イベントとして this.select() を実行されるのが簡単です。SPAN では、jQiery と同様に処理しています。

jQuery でのイベント登録

jQuery のセレクタによるオブジェクト複数選択より、each メソッドで全ての要素に click イベントを登録できるので効率的です。
▼ JavaScript のみ : クリックして下さい

あいうえお
abc-001
日本語 表示



▼ jQuery : クリックして下さい

あいうえお
abc-001
日本語 表示



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
// ***************************
// 一般的な関数定義
// ***************************
function textSelect(obj) {
	var range,sel;
	if (window.getSelection) {
		range = document.createRange();
		range.setStart(obj.firstChild,0);
		range.setEnd(obj.firstChild,obj.firstChild.nodeValue.length);
		sel = getSelection();
		sel.removeAllRanges();
		sel.addRange(range);
	}
}

// ***************************
// jQuery の初期処理
// ***************************
$(function(){
	$(".selection").each(function(){
		$(this).click(function(){
			var tagName = this.tagName.toLowerCase();
			switch( tagName ) {
				case 'textarea':
				case 'input':
					if (this.setSelectionRange) { 
						this.setSelectionRange(0,$(this).val().length);
					}
					// 古いIE(8以前)用
					else if (this.createTextRange) {
						var range = this.createTextRange();
						range.collapse(true);
						range.moveStart('character', 0);
						range.moveEnd('character', $(this).val().length);
						range.select();
					}
					break;
				default:
					if (window.getSelection) {
						var range = document.createRange();
						range.setStart(this.firstChild,0);
						range.setEnd(this.firstChild,$(this).text().length);
						sel = getSelection();
						sel.removeAllRanges();
						sel.addRange(range);
					}
			}
		});
	})
});
</script>
<pre class="w6">
<b class=sttl>▼ JavaScript のみ</b>

<span onclick='textSelect(this)'>あいうえお</span>
<span onclick='textSelect(this)'>abc-001</span>
<span onclick='textSelect(this)'>日本語 表示</span>
<input onclick='this.select()' value="日本語 表示">
<textarea onclick='this.select()'>日本語 表示</textarea>

<b class="sttl">▼ jquery.selection</b>

<span class="selection">あいうえお</span>
<span class="selection">abc-001</span>
<span class="selection">日本語 表示</span>
<input class="selection" value="日本語 表示">
<textarea class="selection">日本語 表示</textarea>




</pre>
関連する記事

jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。


【jQueryの最新記事】
posted by lightbox at 2014-10-23 14:14 | jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり