HTMLページのリンクのクリックで、クリップボードに文字列を挿入するコードと実行結果

運用画面を作成しているのですが、Excelへのペーストや他のテキストボックスへの挿入作業がしやすいようにリンクをクリックすると、その項目に対応した値をクリップボードに挿入して、ペーストによる入力を手軽にできる仕組みを作りたいです。HTMLページのリンクをクリックしたタイミングでクリップボードに文字列を挿入する方法を教えてください。

クリップボードに文字列を挿入する方法

HTMLページのリンクをクリックしたタイミングでクリップボードに文字列を挿入する場合は、 JavaScriptを利用します。JavaScriptのnavigator.clipboardオブジェクトのwriteText()メソッドを利用すると、 JavaScriptでクリップボードに文字列を挿入できます。

JavaScriptの書式

navigator.clipboard.writeText([クリップボードに挿入する文字列]);

プログラム例

コード

以下のHMTLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function CopyClipboardProc() {
      navigator.clipboard.writeText('ぺんぎんクッキー');
    }
  </script>
</head>
<body>
  <h1>クリップボードに値をコピーするデモ</h1>

  <a href="#" onclick="CopyClipboardProc(); return false;">クリップボードに値をコピー</a>
</body>
</html>

解説

リンクをクリックすると、CopyClipboardProc() 関数を呼び出します。

<a href="#" onclick="CopyClipboardProc(); return false;">クリップボードに値をコピー</a>

CopyClipboardProc関数では、navigator.clipboard.writeText()メソッドを呼び出し、クリップボードに文字列を設定します。今回は"ぺんぎんクッキー"の文字列をクリップボードに挿入します。

    function CopyClipboardProc() {
      navigator.clipboard.writeText('ぺんぎんクッキー');
    }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
HTMLページのリンクのクリックで、クリップボードに文字列を挿入するコードと実行結果:画像1

[クリップボードに値をコピー]のリンクをクリックします。

メモ帳を起動します。

メモ帳の[貼り付け]メニューをクリックします。
HTMLページのリンクのクリックで、クリップボードに文字列を挿入するコードと実行結果:画像4

メモ帳にクリップボードの内容が貼り付けられます。「ぺんぎんクッキー」の文字列が貼り付けられ、 HTMLページに記述した内容をクリップボードに挿入できていることが確認できました。
HTMLページのリンクのクリックで、クリップボードに文字列を挿入するコードと実行結果:画像5