JavaScriptでクリップボードにコピーする機能を作成

概要

JSでクリップボードにコピーする機能を作成する方法を調べた際、navigatorのwriteTextメソッドを使用すると可能とあったのですが、HTTP環境だと使用できないので別の方法を調べました。
またVue.jsで処理している値を取得したかったので、どちらも可能な方法を調べました。
そもそもクリップボードにコピーする機能はライブラリを導入する方法もあったのですが、今回はライブラリを導入しない方法を探しました。

環境

PHP：v7.3.11
Vue：v2

実装

• クリップボードにコピーするメソッド(ViewModelクラスに記載)

public copyClipBoard(str: string) {
    const targetSentence = str;
    let input = document.createElement('input');
    input.readOnly = true;
    document.body.appendChild(input);
    input.value = targetSentence;
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
}

• 今回はボタンを押した時にコピーできるようにしたかったので、トリガー用のメソッドを記載

doCopy() {
    _viewModel.copyBoard("コピーしたいテキスト");
}

• HTMLの実装

<button class="copy-clipboard" @click="doCopy">クリップボードにコピー</button>

まとめ

• 今回はJSでクリップボードにコピーする方法についてまとめました。
• 2行くらいでシンプルにかけるかと思っていたのですが、意外と量が多かったため記事にしました。