JavaScriptでクリップボードにコピーする方法

こんにちは、さるまりんです。

画面上の画像などをクリックでテキストをクリップボードにコピーしたい。
シンプルですがそれをする方法をメモしておきます。
Clipboard APIを使うと簡単にできるようです。

まずはHTMLです。

<input type="text" id="copyFrom" value="text to copy">
<button onclick="copyToClipboard()">コピー</button>

<input type="text" id="copyFrom">にコピーしたい文字列を持たせて、ボタンクリックで関数copyToClipboard()が呼ばれて文字列をコピーするようにしています。

JavaScriptの関数copyToClipboard()です。

function copyToClipboard() {
    // id=copyFromの要素を取得
    const copyText = document.getElementById("copyFrom");

    // 値を取得
    copyText.select();
    copyText.setSelectionRange(0, 99999); // 開始と終了の位置を指定

    // クリップボードにコピー
    navigator.clipboard.writeText(copyText.value).then(() => {
        console.log("Copied: " + copyText.value);
    }).catch(err => {
        console.log("Failed on copy text: " + err);
    });
}

navigator.clipboard.writeText([コピーする文字列])

これでクリップボードにコピーできるんですね。

コピーされた文字列をどうするかはそれぞれですが、今回はコンソールのログとして出力しています。(何かでエラーが出たらそれも)

実際にはこんな感じです。

長いタイトルの文字列をコピーしたかったり、画像に表示されているクーポンのコードををコピーしたかったり、いろんな場面で出てきそうです。

読んでくださってありがとうございます。

それではまた！