セルをクリックして文字列をコピーしたい

解決済

質問者：spinia0120
質問日時：2011/12/28 00:39
回答数：4件

テーブルのセルをクリックすると、指定された文章をクリップボードにコピーするようにしたいです。
<table>
_<tr>
__<td class="time">12:00</td>
__<td class="name"><a href="hoge">suzuki</a></td>
_</tr>
</table>
上の例では、12:00のセルをクリックすると、「あいうえお」という文字列をクリップボードにコピーするような感じです。

現在CSSでは
td a{
display:block;
width:100%;
height:100%;
text-decoration: none;
}
と設定しています。

どうやらJavascriptを使えばできるようなのですが、Javascript事態全く使ったことがないのでどう記述すればいいかがわかりませんでした。

調べてみたところ、inputタグにonclick="clipboardData.setData('text',this.value)"と入力すればできると聞きました。ですが、これはinputタグなのでこれはフォームのボタンをクリックした場合にコピーするような内容ですよね。

そうではなく、リンク先をクリックするようなのと同じような感じでセルをクリックすると、文字列をコピーできるような方法が知りたいのです。

できれば記述の方法も教えていただければ助かります。
どなたかご教示のほど、どうかよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： LancerVII
回答日時：2011/12/28 22:47

こんにちは。

具体例ありがとうございました。
以下のソースで実現できたと思います。

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

- 0
- 件

通報する

この回答へのお礼

何度もご回答ありがとうございます_(_^_)_
本当に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. …
に訂正しました。

このhtmlファイルをfirefox　3.6.25の環境で実行した結果、開いたhtmlの時間セルにマウスオーバーすると、下部にmailto:a@aの表示が出てきて、実行するとメーラーが起動します。
また、コピー機能が有効になりません。

javascriptが有効になっていないのかと思い、調べましたが、有効になっています。

この症状はどのようにしたら解決するのでしょうか。どうかよろしくお願いします。

通報する

お礼日時：2011/12/29 10:29

No.4

回答者： ibara994
回答日時：2011/12/28 23:49

<a href="javascript:clipboardData.setData('text', 'mail@suzuki.jp');">12:00</a>

↑こんな風です
でも、clipboardDataを使った方法はIEでしか機能しませんよ
他のブラウザは、クリップボードを操作させないようにしてるので、簡単には出来ません

http://nplll.com/archives/2009/03/iefirefoxsafar …
ここに紹介されてるZeroClipboardは、javascriptからFlash経由で操作してるそうです

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
なるほどです。セキュリティーの問題で無理だったのですか。

ご回答いただいた皆さん、どうもありがとうございました。

通報する

お礼日時：2011/12/29 17:23

No.2

回答者： LancerVII
回答日時：2011/12/28 09:23

こんにちは。

時間をクリックするとメールアドレスをコピーするとのことですがメールアドレスはどこに持っているんですか？
どのようにタグが組まれていて、どのようにしたいかが上手く読み取れません。

12:00 suzuki

と表示されていて
12:00をクリックしたらメールアドレスをクリップボードへ。
suzukiは通常のリンク

なのでしょうか。
この場合、どこかにメールアドレスを持っておかないといけませんが、画面上に表示されているのでしょうか。
例えば
12;00 mailaddress suzuki
とか。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます
＞どのようにタグが組まれていて、どのようにしたいかが上手く読み取れません。
申し訳ありません。質問するにあたり、いろいろ削ったのが裏目に出たようです。

<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の部分にある文字列（この場合はメールアドレス）をそのままクリップボードにコピーするように、上のコードを改編したいのです。

よろしくお願いします。

通報する

お礼日時：2011/12/28 09:54

No.1

回答者： LancerVII
回答日時：2011/12/28 08:22

こんにちは。

JQueryというものを併用すると比較的簡単に実装できます。

>上の例では、12:00のセルをクリックすると、「あいうえお」という文字列をクリップボードにコピーするような感じです。
「あいうえお」が無いので「suzuki」の間違いだとは思いますがいかがでしょうか。
その前提でサンプルソースです。
IE以外で動作させたい場合は以下のURLを参考にしてください。
http://phpspot.org/blog/archives/2010/06/jqueryc …

==== 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. …
<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>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！

ごめんなさい。説明不十分でした
作成している練習用のhtmlからコピーしたのでsuzukiの文字列は関係なく、「時間」をクリックしたときに指定したテキストをコピーできるような方法が知りたいのです。

現在練習しているページは、

・「時間」のセルをクリックするとその人への連絡用メールアドレスがクリップボードへコピーされる
（mailtoでメーラーを起動させるのではなく、クリップボードヘコピーする）

・「人の名前（suzukiとか）」のセルをクリックするとサイト内のその人の紹介ページへリンクする

という機能を持っています。

「人の名前」の方はできたのですが、「時間」の方ができませんでした。

<td class="time">のセルをクリックすると、そのセルに関するtext（この場合はメールアドレスの文字列）をコピーするようなjavascriptがあればできるかな、と考えました。

どうかよろしくお願いします。