トップ > メモ >

詳細(Firefoxでクリップボードにコピー(FP10対応版))

Firefoxでクリップボードにコピー(FP10対応版)

対応バージョン :  
■はじめに

HTMLからクリップボードに文字列をコピーするための
コピー機能の実装方法として
JavaScriptではIEだけでしか動かないので
Firefoxでも動作させるためにFlashと連携する。

しかし、最新のFlashPlayer10ではセキュリティの制限によって、これが使えなくなった。
具体的にはFlashでクリップボードの操作ができるのは
Flash内でイベントが発生したときのみとなった。
このためHTML上のボタンクリック時に、JavaScriptを経由してFlashのコピー機能を使うことができなくなった。

自分用の管理ツールでも結構使ってたので
今日までFirefoxでは仕方なくFlashPlayer9のままにしてたのだが
重い腰をあげて対策することにした。


■対策

今のとこボタン自体をFlashにするしかないと思われる。

すでにこの対策で対応してるスクリプトが
いくつかあるようだが
イマイチ使いずらそうだったので
自分用にシンプル重視で作ってみた。

ちなみにswfはFlexで作った。


■動作サンプル

・固定文字列をコピー(この例では「あいうえお」)
[copy]
・テキストボックスの内容をコピー

[copy]
・テキストエリアの内容をコピー

[copy]

■サンプルソース(HTML)

<div>
  ■固定文字列をコピー(この例では「あいうえお」)<br />
  <div id="swf1" class="btn">[copy]</div>
</div>

<div>
  ■テキストボックスの内容をコピー<br />
  <input type="text" id="txt2" value="かきくけこ" /><br />
  <div id="swf2" class="btn">[copy]</div>
</div>

<div>
  ■テキストエリアの内容をコピー<br />
  <textarea id="txt3" rows="5" cols="40">さしすせそー</textarea><br />
  <div id="swf3" class="btn">[copy]</div>
</div>


<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="copyclipb.js"></script>

<script type="text/javascript">
  $(function(){
    //コピーする文字列が決まってる場合
    createCopyButton("swf1", "あいうえお", "コピー", 80);

    //コピーの対象をテキストボックスにする場合
    createCopyButtonFromTextbox("swf2", $("#txt2"), "コピー", 80);

    //コピーの対象をテキストエリアにする場合
    createCopyButtonFromTextbox("swf3", $("#txt3"), "コピー", 80);
  });
</script>

■使用しているライブラリ

下記のJavaScriptライブラリを使用してます

・swfobject
  http://code.google.com/p/swfobject/

・jQuery
  http://jquery.com/


■使い方

簡単なので
sample.html
を見れば分かると思うので省略。


■ダウンロード

copyclipb_1_0.zip
copyclipb_1_1.zip(2012/11/18差替)

コメント

コメント一覧

No.1 パパぱふぅ [URL]

IE以外のブラウザでも利用できる「コピー」ボタンをいくつか試してみたのですが、シンプルながら使い勝手が良いので、利用させてもらってます。
ところが先日、各種ブラウザ(IE8, Firefox4, Chrome11)+FlashPlayer10.1+UTF-8の条件で、textareaに入力したWindows固有文字や半角カタカナを「コピー」しようとすると文字化けする現象に遭遇。copyclipb.js を下記のように変更することで回避しました。

30行目(挿入):var tmp = encodeURI(txt.val());
40行目(変更):text: tmp

他のモジュールのソースを読んでいないので、トンチンカンな対応をしていたら申し訳ないことですが、いちおうご報告まで。

http://twitter.com/papa_pahoo/

2011/5/16 20:43

No.2 おがた@管理人

>パパぱふぅさん
ご報告ありがとうございます
このページのサンプルで試してみましたが、
IE8、Firefox4ともに大丈夫そうです。
FlashPlayerは10.3と10.2。バージョンのせいでしょうか?
でもこういうご報告は助かります。
同じような現象に当たったら試させていただきます

2011/5/16 22:15

No.3 8142

コピーする内容として、「&(半角アンパサンド)」を初めから入れておくとコピーできません……。

例えば、sample.html 46行目の createCopyButton の第2引数を「&」に変更して保存、ブラウザで表示させてから「コピー」ボタンを押すとクリップボードに反映されないのです。(環境は IE 8 or Firefox 15 + Flash Player 10 or 11)

モジュールとして使いやすく、とてもすばらしいソフトなので、以上一点ご対応いただければ幸いです ^^

2012/10/16 17:19

No.4 カヅサツ [URL]

> コピーする内容として、「&(半角アンパサンド)」を初めから入れておくとコピーできません……。

"&"を"%26"にreplaceするとよろしいかと。

2012/11/9 21:18

No.5 8142

> "&"を"%26"にreplaceするとよろしいかと。
URI エンコード――! パパぱふぅさんのコメント(No.1)をもう少しちゃんと読んでおくべきでした (^^;)
カヅサツさん、ありがとうございます。

2012/11/11 2:34

No.6 おがた@管理人

>8142さん
>カヅサツさん
ありがとうございます。

swfobjectのほうではエンコード処理はしてくれないのですね。
今更ながら知りました。失礼しました。

ということでjavascriptのほうで対応して差し替えました。
copyclipb.js
を上書きしてもらえれば動くと思います。
(古いブラウザではだめかも・・・)

対応が遅くてごめんなさい。

2012/11/18 8:00

No.8 通りすがり

swfファイルは同じ階層じゃないと表示されないんですね。パスを指定出来ればなお良いかと。
ありがとうございました。

2013/5/8 18:56

No.9 takeoji3

おがたさま
copyclipb は商用利用 OK でしょうか?

おそれいりますがご教授いただきたく存じます。

2013/5/22 19:33

No.10 おがた@管理人

>通りすがりさん
javascriptのほうを修正すればできると思います。

>takeoji3さん
問題ありません。よかったらどうぞ

2013/5/24 6:54

コメントフォーム





トラックバック

トラックバックURL

現在トラックバックはありません