【JavaScript】ボタンクリックでクリップボードにテキストをコピーする

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptにてボタンクリックでクリップボードにテキストをコピーする方法をご紹介しています。非推奨となったexecCommandではなくClipboard APIを使った実装方法となります。

上記の疑問にお答えします。

では、解説していきます。

ボタンクリックでクリップボードにテキストをコピーする

ボタンクリックでクリップボードにテキストをコピーします。ここではクリックのトリガーとなる要素はbutton要素とし、コピーするテキストはvalue属性の値とします。

HTML

<button class="js-copy" value="abcdefg">valueの値をコピーする</button>

対象のbutton要素にvalue属性を指定しました。コピーの対象となる値はabcdefgとなります。

続いて、JavaScriptでクリックイベントを取得し、button要素から値を取得します。取得した値はClipboard APIにてクリップボードにコピーします。

JavaScript

document.querySelector('.js-copy').addEventListener('click', (e)=>{
    
    navigator.clipboard.writeText(e.target.value)
    .then(
        success => alert(`コピーに成功しました！ ${e.target.value}`),
        error   => alert(`コピーに失敗しました！`),
    );

}, false);

コピーの成功・失敗でもう少し処理を追加したい場合は、アロー関数を展開してご利用ください。

document.querySelector('.js-copy').addEventListener('click', (e)=>{
    
    navigator.clipboard.writeText(e.target.value)
    .then(
        (success) => {
            alert(`コピーに成功しました！ ${e.target.value}`);
        },
        (error)=>{
            alert(`コピーに失敗しました！`);
        }
    );

}, false);

Clipboard APIについては下記で解説していますのであわせてご参照ください！

最後に

JavaScriptでクリップボードを操作する場合はClipboard APIを使う方法が一般的です。少し前まではexecCommandというメソッドを使用していましたが、現在は非推奨となっていますので、ご注意くださいね！

以上、JavaScriptで、ボタンクリックでクリップボードにテキストをコピーする方法のご紹介でした！