JavaScript でテキストをクリップボードにコピーする
-
JavaScript の
Document.execCommand()メソッドを使用してテキストをクリップボードにコピーする -
JavaScript の
Clipboard APIを使用してテキストをクリップボードにコピーする
今日、多くの Web 開発者は、ユーザーが 1 回のクリックで Web サイトから大量のテキストを直接コピーできるようにする機能を Web サイトに実装したいと考えています。この最も一般的に使用される例のいくつかは、技術的な Web サイトからターミナルコマンドまたはコードスニペット全体をコピーすることです。
クリップボードとはどういう意味で、このプロセス全体がどのように機能するかを見てみましょう。その後、このコピーをクリップボードに実装する機能を JavaScript で実装します。
アプリケーション、画像、テキスト、ファイルなど、コンピューター内に存在するすべてのものはデータと呼ばれます。したがって、コンピュータ内に存在するものをコピーしようとすると、コンピュータは、コピーしたデータにメモリのごく一部を割り当てて、そのデータをそのメモリ空間に格納します。これは[クリップボード]）と呼ばれ、これはコンピュータがコピーした情報を記憶する方法です。データがメモリ内に保存されたので、このデータを取得して貼り付けるか、何度でも使用できます。
理論的には単純に聞こえますが、複雑さが多いため、実際には実装が困難です。しかし、心配しないでください。JavaScript を使用すると、Document.execCommand() メソッドとクリップボード API を使用して、これをはるかに簡単な方法で実行できます。
JavaScript の Document.execCommand() メソッドを使用してテキストをクリップボードにコピーする
これは、クリップボードを操作するために最も一般的に使用される方法です。この方法を使用すると、以下の 3つの操作を実行できます。
Document.execCommand('copy')を使用してテキストをクリップボードにコピーします- テキストを切り取り、
Document.execCommand('cut')を使用してクリップボードに追加します Document.execCommand('paste')を使用して、クリップボードにすでに存在するコンテンツを貼り付けます。
実行する操作のパラメーターを渡す必要があることに注意してください。この記事では、コピー操作のみに焦点を当て、他の操作には焦点を当てません。例を挙げて、このコピー操作を理解しましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button onclick="copyToClipBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClipBoard() {
var content = document.getElementById('textArea');
content.select();
document.execCommand('copy');
alert('Copied!');
}
まず、文字列と button を含む textarea を含む HTML ファイルがあります。ここでの目的は、コピーボタンをクリックしたときにテキストエリア内に存在するテキストをコピーすることです。次に、JS ファイルがあり、その中に copyToClipBoard() という関数があります。この関数は、テキストをクリップボードにコピーする役割を果たします。
最初に、document.getElementById を使用して DOM 内に存在する textarea を取得する必要があり、この要素を content 変数内に格納します。これで、content 変数内に textarea のコンテンツができました。テキストをコピーするには、最初に select() メソッドを使用してテキスト全体を選択する必要があります。これは、マウスを使用してテキストを選択する方法と似ています。
document.execCommand('copy') メソッドを使用して、選択したテキストをコピーし、テキストがクリップボードにコピーされたことをユーザーに通知するアラートを表示します。
最後に、コピーボタンの copyToClipBoard() 関数を onClick イベントとして呼び出す必要があります。これで、ブラウザでこの HTML ページを開くと、最終結果が表示されます。
JavaScript の Clipboard API を使用してテキストをクリップボードにコピーする
Clipboard APIは、クリップボードとの間でコンテンツをコピーして貼り付けることができる非同期の読み取りおよび書き込み操作を提供します。クリップボード API は、navigator.clipboard オブジェクト内で使用できます。
この API は JavaScript 言語に新しく追加されたものであり、すべてのブラウザー、特に古いブラウザーがこの API をサポートできるわけではありません。お使いのブラウザがこの API をサポートしているかどうかを確認したい場合は、以下のコードを使用できます。
if (!navigator.clipboard) {
// Clipboard API not available
return
}
Clipboard API を使用してテキストをクリップボードにコピーする方法を見てみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button id="btn" onclick="copyToClickBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClickBoard() {
var content = document.getElementById('textArea').innerHTML;
navigator.clipboard.writeText(content)
.then(() => {console.log('Text copied to clipboard...')})
.catch(err => {
console.log('Something went wrong', err);
})
}
上記のコードは、これまでに見たコードとほぼ同じです。ここでの唯一の違いは、copyToClickBoard() 関数を変更したことです。このメソッドは、コピーボタンを押すと呼び出されます。この関数内では、最初に innerHTML プロパティを使用して textarea 内に存在するテキストを取得し、そのテキストを content 変数内に格納します。
navigator.clipboard オブジェクトには 2つのメソッドがあります。1つはテキストをクリップボードにコピーするために使用される writeText() メソッドであり、もう 1つはクリップボード内に存在するテキストを読み取って貼り付けるために使用される readText() メソッドです。ここでは、writeText() メソッドについてのみ説明します。
このメソッド内で、変数 content を渡す必要があります。この変数は現在、テキスト全体を文字列形式で保持しています。その後、このメソッドはテキストを取得してクリップボードにコピーします。これが成功すると、Text copied to clipboard... というメッセージが表示されます。それ以外の場合は、発生したエラーの種類に応じてエラーメッセージがスローされます。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn