JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでWebページに「クリップボードにコピー」機能を実装する方法

本記事では、JavaScriptを使ってWebページに「クリップボードにコピー（Copy to Clipboard）」機能を実装する方法を解説します。テキストボックスに入力された文字列を、ボタンを1クリックするだけでクリップボードにコピーできるようにします。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    input,
    button {
        padding: 8px;
    }
</style>
</head>
<body>
<h1>Creating Copy to Clipboard</h1>
<input class="textCopy" type="text" />
<button class="Btn">Copy Text</button><br /><br />
<input type="text" placeholder="paste here" />
<h3>Click on the above button to copy text from the textbox</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let textCopyEle = document.querySelector(".textCopy");
    BtnEle.addEventListener("click", () => {
        textCopyEle.select();
        document.execCommand("copy");
    });
</script>
</body>
</html>

出力結果

上記のコードをブラウザで実行すると、次のような画面が表示されます。

JavaScriptでWebページに「クリップボードにコピー」機能を実装する方法

1つ目のテキストボックスに任意の文字列を入力し、「Copy Text」ボタンをクリックします。

JavaScriptでWebページに「クリップボードにコピー」機能を実装する方法

その後、「paste here」と表示された2つ目のテキストボックス内で左クリックし、「貼り付け」を選択すると、先ほどコピーしたテキストが貼り付けられます。

JavaScriptでWebページに「クリップボードにコピー」機能を実装する方法

コードのポイント

  • select()メソッド：テキストボックス内の文字列を全選択状態にします。コピー対象を明確にするために必要な処理です。
  • document.execCommand("copy")：選択中のテキストをクリップボードにコピーする命令です。ボタンのクリックなど、ユーザーの操作（ユーザージェスチャー）の中でのみ実行できます。

補足：モダンなClipboard APIについて

document.execCommand()は現在非推奨（Deprecated）とされており、将来ブラウザから削除される可能性があります。新規の実装では、Promiseベースで非同期に動作するnavigator.clipboard.writeText()の使用が推奨されています。

navigator.clipboard.writeText(textCopyEle.value)
  .then(() => {
    console.log("クリップボードにコピーしました");
  })
  .catch((err) => {
    console.error("コピーに失敗しました", err);
  });

なお、このAPIはセキュリティ上の理由から、HTTPS環境（またはlocalhost）でのみ利用可能である点に注意してください。

  1. JavaScript（D3.js）を使ってWebページのpタグに配列のすべての値を表示する方法

    配列のすべての値をpタグで表示する方法JavaScriptで配列のすべての値をWebページ上のpタグとして表示したい場合は、D3.jsの .data(anyArrayObject) メソッドを利用するのが便利です。D3.jsはデータとDOM要素を結びつける（データバインディング）ためのライブラリで、data() で配列を渡し、enter() で要素を追加することで、配列の要素数に応じたpタグを自動的に生成できます。以下に具体的なコード例を示します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta chars

  2. JavaScriptでWebページのvideoタグ（動画）を非表示にする方法

    はじめに Webページに、次のようなサンプルのvideoタグが設置されている場面を想定してみましょう。 <video class="hideVideo" width="350" height="255" controls> <source src="" id="unique_video_id"> こちらでは動画を再生できません...... </video> Webページ上の動画を非表示にしたい場合は、yourVariableName.style