JavaScriptで文字列をクリップボードにコピーする

Tags:

純粋なJavaScriptを使う方法

入力フォームにある文字をコピーする方法である。

    <input type="text" value="こんにちは。" id="myText">
    <button onclick="copyText()">文字列をコピー</button>

  function copyText() {
    var copyText = document.getElementById("myText");
    copyText.select();
    document.execCommand("copy");
    alert("コピーされた文字列: " + copyText.value);
  }

コードを実行

参考: IE9以下ではdocument.execCommand()メソッドはサポートされない。

clipboard.jsを使う方法

clipboard.jsを利用したクリップボード操作について見ていく。関連サイトは次のとおりである。

https://clipboardjs.com/

まずライブラリを追加する必要がある。CDNを使う方法を推奨する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

例1) 入力フォームのクリップボード

<input id="foo" value="http://www.devkuma.com">

<button class="btn" data-clipboard-target="#foo">
    <img src=".btn" alt="Copy to clipboard">
</button>

コードを実行

例2) テキストのクリップボード

<button class="btn" data-clipboard-text="こんにちは。">Copy</button>

var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    alert("クリップボード: " + e.text);
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

コードを実行