【JavaScript/jQuery】クリップボードにコピーしてテキストを貼り付ける方法
Webページに記載されているテキストをボタンをクリックするだけでコピー出来たら便利だと思いませんか?
JavaScriptの「Clipboard API」を利用することで簡単に実装することが出来ます。
この記事ではJavaScriptの「Clipboard API」を利用してクリップボードにコピーしてテキストを貼り付ける方法をご紹介したいと思います。
完成コード
まずは完成コードをご紹介します。
とりあえずサクッと実装したいという人は以下のコードをコピペして使用してみて下さい。
HTMLは以下を用意します。
<div>
<input type="text" id="copyText" value="ここにコピーするテキストがあります">
<button id="copyButton">コピーする</button>
</div>
<div>
<input type="text" id="pasteText" placeholder="ここにテキストが貼り付けられます">
<button id="pasteButton">貼り付ける</button>
</div>
そして、テキストをクリップボードにコピーするjQueryのコードはこちら。
// コピー機能
$('#copyButton').click(function() {
let copyText = $('#copyText').val();
navigator.clipboard.writeText(copyText).then(function() {
alert("テキストがコピーされました);
});
});
そして、クリップボードにコピーしたテキストを貼り付けるjQueryのコードはこちら。
// 貼り付け機能
$('#pasteButton').click(function() {
navigator.clipboard.readText().then(function(text) {
$('#pasteText').val(text);
});
});
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
コードの解説
ここからはコードの解説です。
前提として、このコードは「Clipboard API」を利用したものとなっています。
まずはコピー機能のコードの解説です。
$('#copyButton').click(function() { ... });
id="copyButton"
をクリックした時に関数が発火するようになっています。
let copyText = $('#copyText').val();
#copyText
に入力されているテキストを取得します。
navigator.clipboard.writeText(copyText)
navigator.clipboard
で「Clipboard API」の利用を宣言し、writeText(copyText)
の記述でクリップボードのコピーしています。
.then(function() { ... });
then
は動作が成功した場合に実行される関数です。つまりクリップボードにテキストがコピーされた場合に実行されます。
正常にクリップボードにテキストがコピーされた際はアラートが表示されます。
以上がテキストをコピーする部分のコードの解説でした。
続いて、貼り付け機能のコードの解説です。
$('#pasteButton').click(function() { ... });
id="pasteButton"
をクリックした時に関数が発火するようになっています。
navigator.clipboard.readText()
navigator.clipboard
で「Clipboard API」の利用を宣言し、readText()
の記述でクリップボードからテキストを読み取ります。
.then(function(text) { ... });
then
は動作が成功した場合に実行される関数です。つまりクリップボードからテキストの読み取りに成功した場合に実行されます。
読み取られたテキストは引数として受け取ることが出来ます。
$('#pasteText').val(text);
クリップボードから読み取ったテキストを#pasteText
部分に貼り付けます。
以上がクリップボードにコピーしたテキストを貼り付ける部分のコードの解説でした。
まとめ
いかがでしたか?
テキストをコピーして貼り付けるという動作を要求する機会はよくあると思います。
今回ご紹介したコードをしっかり理解して是非活用してみて下さい。
最後にもう一度完成コードをご紹介します。
コピー機能部分のコードはこちら。
// コピー機能
$('#copyButton').click(function() {
let copyText = $('#copyText').val();
navigator.clipboard.writeText(copyText).then(function() {
alert("テキストがコピーされました);
});
});
貼り付け機能部分のコードはこちら。
// 貼り付け機能
$('#pasteButton').click(function() {
navigator.clipboard.readText().then(function(text) {
$('#pasteText').val(text);
});
});
実装サンプルはこちら。