ブラウザ上でJavaScriptを利用したクリップボードへのコピー機能の実装Clipboard API版
エンジニアの中氏です。
以前、ブラウザ上でクリップボードへのコピー機能の実装という記事を投稿しましたが、より便利なブラウザの Clipboard API で実装出来る方法がありますでその方法を紹介します。
Clipboard API はクリップボードの内容を読み書きするために使用する Clipboard
オブジェクトを返します。 Clipboard API は切り取り、コピー、貼り付け機能をウェブアプリケーションに実装するために使用することができます。
今回は、下記にクリップボードにテキストをセットするサンプルプログラムを記載いたします。
/** * 指定したテキストをクリップボードにセットする * * @text {string|HTMLElement} subject */ function copyTextToClipboard(text) { navigator.clipboard.writeText(text).then(function() { console.log('Async: Copying to clipboard was successful!'); }, function(err) { console.error('Async: Could not copy text: ', err); }); }
copyTextToClipboard(文字列)
で使用します。
文字列を指定するだけで、クリップボードにセットできます。
Clipboard API ブラウザの対応状況について、現状は、Chrome と FireFox のみの対応となっています。
よって、ブラウザを判別して前回の方法と今回の方法を両方使用すれば、ほとんどのブラウザで実装可能となります。