クリックした後、右クリックまたは 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の最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理