ChatGPT

HTML上でボタンをクリックすると、指定されたサンプルの部分をクリップボードに送るためには、JavaScriptを使用する必要があります。以下に、JavaScriptを使用した実装例を示します。

html
<!DOCTYPE html>
<html>
<head>
  <title>クリップボードに送るボタン</title>
  <script>
    function copyToClipboard() {
      // サンプルの部分のテキストを取得
      var sampleText = document.getElementById("sample").innerText;

      // 一時的なテキストエリアを作成して、サンプルのテキストを設定
      var tempTextArea = document.createElement("textarea");
      tempTextArea.value = sampleText;

      // テキストエリアをページ内に追加
      document.body.appendChild(tempTextArea);

      // テキストエリアの選択範囲を設定
      tempTextArea.select();
      tempTextArea.setSelectionRange(0, 99999); // モバイルデバイス向けの対応

      // コピー操作を実行
      document.execCommand("copy");

      // テキストエリアを削除
      document.body.removeChild(tempTextArea);

      // コピー完了メッセージを表示
      alert("サンプルのテキストがクリップボードにコピーされました。");
    }
  </script>
</head>
<body>
  <button onclick="copyToClipboard()">クリップボードに送る</button>

  <p id="sample">ここにサンプルのテキストが記載されます。</p>
</body>
</html>

上記のコードでは、copyToClipboardというJavaScript関数がボタンのクリックイベントで呼び出されます。この関数では、getElementByIdを使用してsampleというIDを持つ要素からテキストを取得し、一時的なテキストエリアを作成してそのテキストを設定します。次に、selectメソッドを使用してテキストエリアの選択範囲を設定し、execCommand("copy")を使用してコピー操作を実行します。最後に、テキストエリアを削除し、コピー完了メッセージを表示するようになっています。

このコードをHTMLファイルに保存し、ブラウザで開くとボタンが表示され、クリックするとサンプルのテキストがクリップボードにコピーされます。