けーちゃんの自作Webツール

クリップボードコピーボタン設置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;
}