- ベストアンサー
セルをクリックして文字列をコピーする方法
- テーブルのセルをクリックすると、指定された文章をクリップボードにコピーする方法を教えてください。
- Javascriptを使用して、セルをクリックして文字列をコピーする方法を記述したいです。
- 現在CSSでは、セルをクリックして文字列をコピーするための設定ができていません。どのように記述すればいいか教えてください。
- spinia0120
- お礼率69% (152/219)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 具体例ありがとうございました。 以下のソースで実現できたと思います。 <html> <head> <title>セルをクリックして文字列をコピーしたい</title> <style type="text/css"> table { border: solid 1px #999; border-collapse: collapse; } td { border: solid 1px #999; } td a { display: block; width: 100%; height: 100%; text-decoration: none; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $().ready ( function() { // class="time"に隣接するaタグのクリックイベントに処理を設定 $('.time a').click ( function() { // aタグのhrefから値を取得してmailto:以降をコピー clipboardData.setData ( 'text', $(this).attr('href').substr(7) ); // 実際の動作の取消 return false; }); }); </script> </head> <body> <table> <tr> <td class="time"><a href="mailto:a@a">12:00</a></td> <td class="name"><a href="#">あいうえお</a></td> <td class="time"><a href="mailto:b@b">12:30</a></td> <td class="name"><a href="#">かきくけこ</a></td> </tr> <tr> <td class="time"><a href="mailto:c@c">16:00</a></td> <td class="name"><a href="#">さしすせそ</a></td> <td class="time"><a href="mailto:d@d">16:30</a></td> <td class="name"><a href="#">たちつてと</a></td> </tr> <tr> <td class="time"><a href="mailto:e@e">21:00</a></td> <td class="name"><a href="#">なにぬねの</a></td> <td class="time"><a href="mailto:f@f">21:30</a></td> <td class="name"><a href="#">はひふへほ</a></td> </tr> </table> 貼り付けテスト用 <br> <textarea cols="50" rows="5"></textarea> </body> </html>
その他の回答 (3)
- ibara994
- ベストアンサー率75% (9/12)
<a href="javascript:clipboardData.setData('text', 'mail@suzuki.jp');">12:00</a> ↑こんな風です でも、clipboardDataを使った方法はIEでしか機能しませんよ 他のブラウザは、クリップボードを操作させないようにしてるので、簡単には出来ません http://nplll.com/archives/2009/03/iefirefoxsafarioperaflash_ver1_1.php ここに紹介されてるZeroClipboardは、javascriptからFlash経由で操作してるそうです
お礼
ご回答ありがとうございます。 なるほどです。セキュリティーの問題で無理だったのですか。 ご回答いただいた皆さん、どうもありがとうございました。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 時間をクリックするとメールアドレスをコピーするとのことですがメールアドレスはどこに持っているんですか？ どのようにタグが組まれていて、どのようにしたいかが上手く読み取れません。 12:00 suzuki と表示されていて 12:00をクリックしたらメールアドレスをクリップボードへ。 suzukiは通常のリンク なのでしょうか。 この場合、どこかにメールアドレスを持っておかないといけませんが、画面上に表示されているのでしょうか。 例えば 12;00 mailaddress suzuki とか。
お礼
ご回答ありがとうございます ＞どのようにタグが組まれていて、どのようにしたいかが上手く読み取れません。 申し訳ありません。質問するにあたり、いろいろ削ったのが裏目に出たようです。 <table> _<tr> __<td class="time"><a href="mailto:mail@suzuki.jp">12:00</td> __<td class="name"><a href="http://foo.jp/suzuki/">suzuki</a></td> _</tr> </table> こういう風になっています。これでは、時間をクリックするとmail@suzuki.jpを宛先にメールソフトが起動してしまいます。 td.timeのa hrefの部分にある文字列（この場合はメールアドレス）をそのままクリップボードにコピーするように、上のコードを改編したいのです。 よろしくお願いします。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 JQueryというものを併用すると比較的簡単に実装できます。 >上の例では、12:00のセルをクリックすると、「あいうえお」という文字列をクリップボードにコピーするような感じです。 「あいうえお」が無いので「suzuki」の間違いだとは思いますがいかがでしょうか。 その前提でサンプルソースです。 IE以外で動作させたい場合は以下のURLを参考にしてください。 http://phpspot.org/blog/archives/2010/06/jqueryclipboard.html ==== sample.html <html> <head> <title>セルをクリックして文字列をコピーしたい</title> <style type="text/css"> table { border:solid 1px #999; border-collapse:collapse; } td { border:solid 1px #999; } td a { display:block; width:100%; height:100%; text-decoration:none; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $().ready ( function() { // class="time"のクリックイベントに処理を設定 $('.time').click ( function() { // 隣接するテキストを取得しクリップボードにセット clipboardData.setData ( 'text', $(this).next().text() ); }); }); </script> </head> <body> <table> <tr> <td class="time">12:00</td> <td class="name"><a href="#">あいうえお</a></td> <td class="time">12:30</td> <td class="name"><a href="#">かきくけこ</a></td> </tr> <tr> <td class="time">16:00</td> <td class="name"><a href="#">さしすせそ</a></td> <td class="time">16:30</td> <td class="name"><a href="#">たちつてと</a></td> </tr> <tr> <td class="time">21:00</td> <td class="name"><a href="#">なにぬねの</a></td> <td class="time">21:30</td> <td class="name"><a href="#">はひふへほ</a></td> </tr> </table> 貼り付けテスト用<br> <textarea cols="50" rows="5"></textarea> </body> </html>
お礼
ご回答ありがとうございます！ ごめんなさい。説明不十分でした 作成している練習用のhtmlからコピーしたのでsuzukiの文字列は関係なく、「時間」をクリックしたときに指定したテキストをコピーできるような方法が知りたいのです。 現在練習しているページは、 ・「時間」のセルをクリックするとその人への連絡用メールアドレスがクリップボードへコピーされる （mailtoでメーラーを起動させるのではなく、クリップボードヘコピーする） ・「人の名前（suzukiとか）」のセルをクリックするとサイト内のその人の紹介ページへリンクする という機能を持っています。 「人の名前」の方はできたのですが、「時間」の方ができませんでした。 <td class="time">のセルをクリックすると、そのセルに関するtext（この場合はメールアドレスの文字列）をコピーするようなjavascriptがあればできるかな、と考えました。 どうかよろしくお願いします。
お礼
何度もご回答ありがとうございます_(_^_)_ 本当にLancerVIIさんには頭が上がりません 教えていただいたコードをメモ帳にコピーしてtest.htmlで保存し、gooによってscriptタグが省略されていたので、 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. … の行を <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> に訂正しました。 このhtmlファイルをfirefox 3.6.25の環境で実行した結果、開いたhtmlの時間セルにマウスオーバーすると、下部にmailto:a@aの表示が出てきて、実行するとメーラーが起動します。 また、コピー機能が有効になりません。 javascriptが有効になっていないのかと思い、調べましたが、有効になっています。 この症状はどのようにしたら解決するのでしょうか。どうかよろしくお願いします。