ボタン押下でクリップボードから取得＆表示

実際の動作

この文字を「取得」コピーしてからボタンを押す。

使用するコード

↓HTML.html

<div class="contentbox">
    <p id="clipboardContent" type="text"></p>
    <button id = "readClipboard">PUSH</button>
</div>
<script src="JavaScript.js"></script>

↓CSS.style

.contentbox{ 
    text-align: center;
}
div p{
    margin: 0 auto;
    width: 25%;
    font-size: 0.8rem;
}
div button{
    width: 25%;
    height: 25px;
    border: solid 1px #808080;
    border-radius: 50px;
}
div button:hover{
    background: #FFF;
    box-shadow: 2px 3px 5px 0 #808080 inset;
}

↓JavaScript.js

window.onclick = async () => {
      const clipboardContent = document.getElementById("clipboardContent");
      try {
          const text = await navigator.clipboard.readText();
          clipboardContent.innerText = text;
          clipboardContent.style = "color:black";
      } catch (error) {
          clipboardContent.innerText = error;
          clipboardContent.style = "color:red";
      }
  };

document.getElementById("readClipboard").addEventListener("click", async () => {
  const clipboardContent = document.getElementById("clipboardContent");
  try {
      const text = await navigator.clipboard.readText();
      clipboardContent.innerText = text;
      clipboardContent.style = "color:black";
  } catch (error) {
      clipboardContent.innerText = error;
      clipboardContent.style = "color:red";
  }
});

HTML解説

<p id="clipboardContent" type="text"></p>

→クリップボードから読み取ったテキストを表示するための段落要素。
id属性は後でJavaScriptからこの要素を参照するために使用する。

<button id="readClipboard">PUSH</button>

→クリップボードの内容を読み取るためのトリガーボタン。

CSS解説

text-align: center;

→要素を中央揃えにします。

margin: 0 auto;

→上下のマージンを0にし、左右のマージンを自動にすることで、要素を中央に配置します。

width: 25%;

→ブロックの幅を親要素の25％に設定します。

font-size: 0.8rem;

→フォントサイズをルートフォントサイズの80％に設定します。

height: 25px;

→ブロックの高さを25pxに設定します。

border: solid 1px #808080;

→要素に対し、境界線を設定します。
border: 線の種類線の太さ線の色;

border-radius: 50px;

→要素の角を面取りします。

div button:hover{}

→要素にマウスカーソルを乗せたときに適用されます。

background: #FFF;

→要素の背景を設定します。

box-shadow: 5px 5px 5px 0 #808080;

→要素に影を設定します。
box-shadow: 水平方向垂直方向ぼかし大きさ色内外の指定;
水平方向： -10px=左に10px (必須)
垂直方向： -5px＝上に5px (必須)
ぼかし：数値が大きくなるほど、ぼかしが強くなる。 (省略可)
大きさ：正の値を指定で、全方向に影を拡大。 (省略可)
色：デフォルトは#000で黒色。 (省略可)
内外の指定：外に影付けは未記入、内に影付けは｢inset｣を記入。(省略可)

JavaScript解説

window.onclick

→ウィンドウ内の任意の場所がクリックされたときに実行される非同期関数を定義。

navigator.clipboard.readText()

→クリップボードからテキストを非同期に読み取るメソッド。

try...catch

→テキストの読み取りが成功した場合はその内容を表示し、失敗した場合はエラーメッセージを表示します。

clipboardContent.innerText = text;

→読み取ったテキストを段落要素に設定。

clipboardContent.style

→テキストの色を設定。成功時は黒、失敗時は赤。

document.getElementById("readClipboard").addEventListener("click", ...)

→ボタンがクリックされたときに実行される非同期関数を定義。

try...catch

→ボタンクリック時にも同様にクリップボードからテキストを読み取ります。

上記を改造してみる。