クリップボードコピーボタン設置Javascriptライブラリ
divタグ内に簡易的なコピーボタンを設置し、クリップボードへのコピーを行うJavascriptライブラリのダウンロードページです。
本スクリプトは、JQueryが必要ありません。
サンプル:
コピーボタンを下部に設定します。
クリックすることで、テキストをクリップボードにコピーします。
コピーボタンを上部に設定します。
クリックすることで、テキストをクリップボードにコピーします。
使用規約:本ライブラリを使用する場合、次の事項に同意されたものとみなします。
1) 本ライブラリは無償で提供されるものであり、完全な動作を保証するものではありません。
2) 本ライブラリ使用によるいかなる損害について、本プログラムの作成者は一切の責任を負いません。
3) 本ライブラリはJavascriptがオフになっているブラウザでは、動作しません。
3) 本ライブラリはAMP(Accelerated Mobile Pages)では使用できません。
ダウンロード:affi-clip-copy.zip (v1.0)
使用方法
1) 本ツールをダウンロード後解凍をし、jsとcssファイルをサーバーにアップロードしてください。
2) htmlファイルに、jsとcssファイルを適用します。
例:
<link rel="stylesheet" href="https://ドメイン/css/affi-clip-copy.css" type="text/css">
<script src="https://ドメイン/js/affi-clip-copy.min.js" type="text/javascript"></script>
3) コピーボタンを設置するdivタグに、affi-cpareaクラスを設定します。
例:
<div class="affi-cparea">
・・・テキスト・・・
</div>
コピーボタンを上部に設置する場合、data-copy-pos="top"をセットしてください。
例:
<div class="affi-cparea" data-copy-pos="top">
・・・テキスト・・・
</div>
スクリプト実行後のタグ構造
スクリプトの実行により、設置したタグは次のように置き換えられます。
下部設置:data-copy-pos="top"なし
<div class="dottbox affi-cparea">
<div class="affi_cparea_text affi_cparea_bottom">
・・・テキスト・・・
</div>
<div class="affi_cparea_btn affi_cparea_bottom">
<p><span>【コピー】</span></p>
</div>
</div>
上部設置:data-copy-pos="top"あり
<div class="dottbox affi-cparea" data-copy-pos="top">>
<div class="affi_cparea_btn affi_cparea_top">
<p><span>【コピー】</span></p>
</div>
<div class="affi_cparea_text affi_cparea_top">
・・・テキスト・・・
</div>
</div>
カスタマイズ
表示テキストのカスタマイズ
ボタンやコピー完了時に表示するテキストを変更することができます。
変更する場合は次のタグのテキストを変更し、jsファイルの読み込みより前に貼り付けてください。
<script>
window.affisapo = window.affisapo || {};
window.affisapo["copy_str"]="【コピー】";
window.affisapo["copy_ok"]="クリップボードにコピーしました";
window.affisapo["copy_ng"]="クリップボードにコピーできませんでした";
</script>
外観のカスタマイズ
外観のカスタマイズは、ダウンロードファイルに含まれるaffi-clip-copy.cssを直接変更するか、別途スタイル定義をおこない上書きしてください。
affi-clip-copy.cssの内容:
.affi-cparea{
position: relative;
}
.affi_cparea_text{
margin: 0;
}
.affi_cparea_btn{
font-size: 0.8em;
background: #333;
padding: 0 1em;
color:#fff;
}
.affi_cparea_text.affi_cparea_top{
margin-top: 1em;
}
.affi_cparea_btn.affi_cparea_bottom{
margin-top: 1em;
}
.affi_cparea_btn p{
text-align:right;
}
.affi_cparea_btn span{
background: #fff;
padding: 0 1em;
color: #000;
cursor: pointer;
}
.affi_cparea_btn span:hover{
background: #333;
text-shadow:1px 1px 1px rgba(255,100,100,0.2);
box-shadow: -2px -2px 2px rgba(255,255,255,0.2) inset;
color:#fff;
}