この記事の前編とも言える前回の記事では、

Clipboard API を使用して、
対象の要素が持つテキストを取得、クリップボードに書き込む（≒コピーする）方法について書きました。
(上記リンク先の Clipboard API の解説ページは Mozilla運営の MDN Web Docs より。)

今回はそれの逆の操作、つまりクリップボードから要素を取得する場合について、書いていきたいと思います。

なお前回の記事でも書きましたが、少し前までクリップボード関連の操作をJavaScriptで行う場合 execCommand() というものを使用するケースが多かったようですが、
execCommand() が非推奨・廃止となり、その代替の機能を提供するかのごとく動作してくれるのが
今回の Clipboard API になります。

クリップボードからテキストを取得する

では、早速コードについて書いていきたいと思います。
クリップボードからテキストを取得するには、
clipboard.readText();
を使用します。

[JavaScript側]

<script>
const myElPaste = document.getElementById('myButtonPaste');
myElPaste.addEventListener('click', () => {
  navigator.clipboard.readText().then((e) => {
    document.getElementById('boardPaste').innerText += e;
  }, () => {
    return;
  });
});
</script>

上記は、myButtonPaste という id を持ったボタンを押したら、
現在クリップボードにあるテキストを取得。
対象の要素にそのテキストを追加する（≒ペーストする）、という内容です。
まず、2行目では、クリック対象のボタンを getElementById で取得して、変数に格納しています。
3行目〜9行目では、 addEventListener(‘click’, () => { … として、
対象のボタンにクリックイベントが発生した時に動く挙動を定義しています。
4行目では、navigator.clipboard.readText() を使用して、
現在クリップボードにあるテキストを取得しています。
そして、続く .then((e) => { … の中で、取得が正常に行われた場合の挙動と、
例外の場合の挙動を定義しています。
5行目が取得が正常に行われた場合の挙動で、
取得したクリップボードのテキストを追加したい（≒ペーストしたい）要素を指定して、
そこに .innerText += e; として、
テキストを追加（≒ペースト）している、という形になります。

html側は、上記に対応する形とするならば、次のようなものを用意しておけば良いです。
サンプルなので、styleについては最小限です。

[htmlの例]

<div id="boardPaste" style="margin: 0 auto 2rem; width: 1200px;">
  ここが貼り付け先の要素
</div>
<div>
  <button id="myButtonPaste" style="border: 1px solid #777; border-radius: 8px; padding: .25rem 2rem;">ボタン</button>
</div>

気をつけるべき点

一見、何の問題もないように思える、
クリップボードからテキストを取得して
対象の要素にテキストを追加する（≒ペーストする）、という挙動。

しかし、上記のサンプルの中で、注意した方が良い場所があります。
それは、5行目の
document.getElementById(‘boardPaste’).innerText += e;
↑の、 innerText の部分です。

テキストを要素に追加する方法が JavaScript では複数存在するのですが、
取得したテキストを、htmlとして追加させてしまう方法もあったりします。
それについては書く事すらいやなので、どんなものかは敢えて書きませんが。

もし万が一それを行なってしまうと、もしもクリップボード内に
ペーストしただけで動くようなスクリプトを仕込まれていた場合などに、セキュリティリスクとなります。

したがって、テキストを JavaScript で追加する場合は
innerText のように、htmlとしては機能しない方法で
テキスト要素の追加を行う必要がある、という事です。
（しっかりとしたエスケープ処理をしている場合や、必ず管理者側からの操作しか行われない等、余程安全が保障されている場合以外は。）

この記事のまとめ

対象の要素が持つテキストコンテンツを取得して、クリップボードに書き込む（≒コピーする）という事について書いた前回の記事に続いて、
今回は、クリップボードからテキストを取得、それを対象の要素に追加する（≒ペーストする）場合について書きました。

上のセクションで書いた通り、JavaScriptで
文字等、何らかの要素を追加することに関する処理を行う場合は、
くれぐれも「htmlやスクリプトとして動く形では追加させない」
という点に気をつけることが必要です（安全が保障されない限りは）。

ただし、上記のようなセキュリティ面にしっかり気をつければ、
前回ご紹介した方法と合わせて使う事で
ボタン一つでコピー、ペースト機能を操作できるUIが作成できたり、
地味な様でいて、なかなか使える機能になるかと思います。
（例えば、チャット機能を持ったWebアプリや、単純に文字の入力欄などでも使える機能かなと思います）

当サイトでは今後も、Web制作、Webデザインに関する記事を執筆していきます。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。