clipboard.jsを使ってクリップボードにテキストをコピーする方法をご紹介します。
Contents
ディスプレイ広告
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>
clipboard.jsを使ってクリップボードにテキストをコピーするデモページ
clipboard.jsを使ってクリップボードにテキストをコピーするデモページ
ソース元:clipboard.js
clipboard.js
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。