ブラウザ上でJavaScriptを利用したクリップボードへのコピー機能の実装Clipboard API版

エンジニアの中氏です。

以前、ブラウザ上でクリップボードへのコピー機能の実装という記事を投稿しましたが、より便利なブラウザの Clipboard API で実装出来る方法がありますでその方法を紹介します。

Clipboard API はクリップボードの内容を読み書きするために使用する Clipboard オブジェクトを返します。 Clipboard API は切り取り、コピー、貼り付け機能をウェブアプリケーションに実装するために使用することができます。

今回は、下記にクリップボードにテキストをセットするサンプルプログラムを記載いたします。

1/**
2 * 指定したテキストをクリップボードにセットする
3 *
4 * @text {string|HTMLElement} subject
5 */
6function copyTextToClipboard(text) {
7     navigator.clipboard.writeText(text).then(function() {
8         console.log('Async: Copying to clipboard was successful!');
9     }, function(err) {
10         console.error('Async: Could not copy text: ', err);
11     });
12 }

copyTextToClipboard(文字列)

で使用します。

文字列を指定するだけで、クリップボードにセットできます。

Clipboard API ブラウザの対応状況について、現状は、Chrome と FireFox のみの対応となっています。

よって、ブラウザを判別して前回の方法と今回の方法を両方使用すれば、ほとんどのブラウザで実装可能となります。