【JavaScript】クリップボードにテキストをコピーするnavigator.clipboard.writeText()

「JavaScript クリップボード コピー」で検索すると、

document.execCommand('copy');

でやる方法がﾁｮｺﾁｮｺ引っかかるのですが、このやり方は現在非推奨で、clipboardを使う方式へ順次移行が進んでいるところ、とのことなので、ナウいやり方をチェックしていきましょう。

順次移行が進んでいるところなので、2021年9月現在、古いブラウザだと動作しなかったり、一部機能しか使えなかったりすることがあります。（とりあえず私が使っているWindowsのChromeとAndroidのChromeでは動作しました）

対応状況は見ておきたいところ。

基本的な使い方

let text = "書き込みたいテキスト"
navigator.clipboard.writeText(text).then(success,faild);
    
function success(){
    console.log("コピーに成功しました");
}
function faild(){
    console.log("コピーに失敗しました");
}

ｳﾜｰｯ、出たーッ、Promissだーッ！

……と、ちょっと拒否反応出そうになってしまいましたが、そんなに難しくなかったです。

基本は、navigator.clipboad.writeText()に書き込みたい文字列をstringで渡すだけです。

で、その処理結果を.then()で受け取ります。

.thenに渡す引数は、.then(成功したときに呼ぶ関数,失敗したときに呼ぶ関数)です。

無名関数やアロー関数を使って

    navigator.clipboard.writeText(text).then(
       ()=>{alert("クリップボードにコピーしました")},
       ()=>{alert("コピーに失敗しました")}
    );

こう書いても良いです。

アロー関数の華麗な使い方は

こちらにまとめております。

ちょっと親切な使い方

if(!navigator.clipboard){alert("このブラウザは対応していません")}

対応していないブラウザの場合、navigator.clipboardが呼び出せないので、コピー処理を始める前にチェックしてあげると、親切。

参考：

Clipboard.writeText() - Web APIs | MDN