clipboard.jsを使ってクリップボードにテキストをコピーする方法｜DAD UNION

clipboard.jsを使ってクリップボードにテキストをコピーする方法をご紹介します。

Contents

clipboard.jsを使ってクリップボードにテキストをコピーするCSS記述
clipboard.jsを使ってクリップボードにテキストをコピーするHTML記述
clipboard.jsを使ってクリップボードにテキストをコピーするJavaScriptの記述
clipboard.jsを使ってクリップボードにテキストをコピーするデモページ
ソース元：clipboard.js

clipboard.jsを使ってクリップボードにテキストをコピーするCSS記述

※クリックするボタン（button）とコピーするテキストエリア（#dvtxt、input）のCSS記述です。必要に応じて変更して下さい。

<style>
body{
	padding: 0;
	margin: 0;
  text-align: center;
  font-size: 16px;
}
h1{
	font-size:20px;
	line-height:1.6em;
	text-align:center;
	padding: 15px 0 25px 0;
}
#dvtxt{
  font-size: 18px;
}
input{
  padding: 8px;
  margin: 0 0 10px 0;
  width: 250px;
  margin: 0 auto;
}
button{
  margin: 15px;
  padding: 4px;
}
</style>

clipboard.jsを使ってクリップボードにテキストをコピーするHTML記述

※クリックするボタン（button）とコピーするテキストエリア「id=”dvtxt”」「input」を用意します。テキストエリアにはクリップボードにコピーするテキストを記述しておきます。ボタン（button）には「data-clipboard-action=”テキストコピーやカット”」「 data-clipboard-target=”コピーするテキストエリア”」属性を記述します。

<h1>clipboard.jsを使ってクリップボードにテキストをコピーします。<br>以下の2つボタンをクリックするとボタンのターゲット先のテキストをクリックボードにコピーします。</h1>

<div id="dvtxt">divタグ内の文字</div>
<button
  class="btndiv"
  data-clipboard-action="copy"
  data-clipboard-target="#dvtxt"
>
  divタグの文字をコピー
</button>

<br>
<br>
<br>

<input id="inpttxt" type="text" value="テキストボックスの文字" /><br>
<button
  class="btninput"
  data-clipboard-action="copy"
  data-clipboard-target="#inpttxt"
>
  テキストボックスの文字をコピー
</button>

clipboard.jsを使ってクリップボードにテキストをコピーするJavaScriptの記述

※clipboard.min.js”ファイルを読み込みます。new ClipboardJS(‘クリックボタン’)を宣言し、clipboard_div.on(‘成or否’,function (e) { 処理 })を記述します。

<script src="clipboard.min.js"></script>
<script type="text/javascript">
      var clipboard_div = new ClipboardJS('.btndiv');

      clipboard_div.on('success', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
      });

      clipboard_div.on('error', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
      });


      var clipboard_input = new ClipboardJS('.btninput');

      clipboard_input.on('success', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
      });

      clipboard_input.on('error', function (e) {
        console.log(e);
      });
</script>