フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【JavaScript/jQuery】クリップボードにコピーしてテキストを貼り付ける方法

Clipboard API
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);
    });
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.