- blogs:
- cles::blog
2015/03/01
JavaScript を使ってワンクリックでウェブの内容をコピペできるようにする
javascript
ウェブページの内容をワンクリックでコピペできると便利なのですが、セキュリティ上問題があったりするので標準ではうまい方法がありません。これについては2007年に調べたときから状況は変わらず、当時使っていたウノウのライブラリ*1も少し改良されていたりしますが、今日はZeroClipboard を使ってみることにします。
The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface. The "Zero" signifies that the library is invisible and the user interface is left entirely up to you.
必要なものは ZeroClipboard.min.js と ZeroClipboard.swf の2ファイル。
これらについてはウェブアクセスできる位置にアップロードしておきます。
今回は jQuery と合せて以下のように設置してみました。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/ZeroClipboard.min.js" >
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".zero-clip").each(function() {
$(this).attr('data-clipboard-text', $(this).text().trim());
});
var client = new ZeroClipboard($(".zero-clip"), {});
client.on( "ready", function( readyEvent ) {
client.on( "aftercopy", function( event ) {
$(event.target).css('opacity', '.4').animate({'opacity': '1'}, 'slow');
});
});
});
</script>
あとは HTML 中に以下のように書いておけば、spanの中身がワンクリックでコピーされるようになります。
<span class="zero-clip">hoge</span>
トラックバックについて
Trackback URL:
お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/7425
Trackbacks
このエントリにトラックバックはありません
Comments
愛のあるツッコミをお気軽にどうぞ。[policy]
古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
コメントはありません
Comments Form
コメントは承認後の表示となります。
OpenIDでログインすると、即時に公開されます。
OpenID を使ってログインすることができます。
サイト内検索
検索ワードランキング
へぇが多いエントリ
閲覧数が多いエントリ
1 . アーロンチェアのポスチャーフィットを修理(114080)
2 . 福岡銀がデマの投稿者への刑事告訴を検討中(112655)
3 . 年次の人間ドックへ(112116)
4 . 2023 年分の確定申告完了！（１つめ）(111686)
5 . 三菱鉛筆がラミーを買収(111565)
2 . 福岡銀がデマの投稿者への刑事告訴を検討中(112655)
3 . 年次の人間ドックへ(112116)
4 . 2023 年分の確定申告完了！（１つめ）(111686)
5 . 三菱鉛筆がラミーを買収(111565)
cles::blogについて
Referrers
21980002
(W:21735 Y:9842 T:3483)
