Webアプリケーションの入力に利用できるよう，クリップボードにコピーした文字列または画像をボタン1回で獲得することを目指して，ひとつページを試作しました．
上記URLにアクセスすると，右下に「ブラウザで表示される文字列や、画像を、「コピー」してから、下のボタンを押してみてください。」というメッセージと，「クリップボードから獲得」というボタンが表示されます．
このうちの「コピー」（カギカッコを含む）をコピーしてから，ボタンを押すと，すぐ下に，コピーした内容が表示されます．
画像のコピーを試してみます．Windows 11/10なら，Windows + Shift + Sのキーでスクリーンショットを作成できます．「四角形の領域切り取り」を使用して，以下のように，Chromeの右上の部分を切り取り，クリップボードに入れます．画像をファイルとして保存したり，ペイントまたはIrfanViewなどを取り出してそこに貼り付けたりしません．
先ほどのページ上で「クリップボードから獲得」のボタンを押すと，画像が獲得できたことが分かります．
いろいろ入力を与えて，興味深かったことを紹介します．この結果表示の画像を右クリックして，「画像をコピー」を選びます．それから，「クリップボードから獲得」のボタンを押すと，画像の上の表示が変わります．
1回目は「0: image/png」でしたが，2回目は「0: text/html,image/png」です．これは，ブラウザの操作で画像をコピーしたとき，画像だけでなく，その画像の表示のためのHTMLの要素も，コピーしているからです．振り返ると，最初の「コピー」の貼り付け結果も，「0: text/plain,text/html」となっています．これも，プレーンテキストのコピーと，HTMLのコピーの両方が，含まれていることを意味します．
ここまで，想定する流れを説明しましたが，実際には，思うようにいかないところがあります．ブラウザがFirefoxだと，動作しません．というのも，navigator.clipboard.read()というのを呼び出しているのですが，Firefoxでは対応していないのです*1．呼び出せない場合には，alertを使用してメッセージを表示させ，ボタンは配置しないようにしています．
ブラウザがChrome，Vivaldi，Edgeなら，ボタンが表示され，クリップボードからの獲得ができるのですが，（1回目の）ボタンを押した直後に，許可を求める問い合わせがあります．
これに対して「許可する」を押すことで，コピーができるようになります．
なお，ボタンを押して，この問い合わせが出ず，コピーしてくれない場合もあります．ページを再読込したり，ボタンをもう一度押したりすると，許可を求める問い合わせが表示されます．
作成にあたり，以下のページを参照しました．
