tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。対象の要素が持つテキストを取得、クリップボードに書き込む(≒コピーする)方法について書きました。)今回はそれの逆の操作、つまりクリップボードから要素を取得する場合について、書いていきたいと思います。クリップボードからテキストを取得するでは、早速コードについて書いていきたいと思います。クリップボードからテキストを取得するには、clipboard.readText();を使用します。現在クリップボードにあるテキストを取得。対象の要素にそのテキストを追加する(≒ペーストする)、という内容です。取得して、変数に格納しています。対象のボタンにクリックイベントが発生した時に動く挙動を定義しています。現在クリップボードにあるテキストを取得しています。例外の場合の挙動を定義しています。して、テキストを追加(≒ペースト)している、という形になります。html側は、上記に対応する形とするならば、次のようなものを用意しておけば良いです。サンプルなので、styleについては最小限です。何の問題もないように思える、クリップボードからテキストを取得して対象の要素にテキストを追加する(≒ペーストする)、という挙動。上記のサンプルの中で、注意した方が良い場所があります。取得したテキストを、htmlとして追加させてしまう方法もあったりします。それについては書く事すらいやなので、どんなものかは敢えて書きませんが。万が一それを行なってしまうと、もしもクリップボード内にペーストしただけで動くようなスクリプトを仕込まれていた場合などに、セキュリティリスクとなります。ように、htmlとしては機能しない方法でテキスト要素の追加を行う必要がある、という事です。(しっかりとしたエスケープ処理をしている場合や、必ず管理者側からの操作しか行われない等、余程安全が保障されている場合以外は。今回は、クリップボードからテキストを取得、それを対象の要素に追加する(≒ペーストする)場合について書きました。上のセクションで書いた通り、JavaScriptで文字等、何らかの要素を追加することに関する処理を行う場合は、くれぐれも「htmlやスクリプトとして動く形では追加させない」という点に気をつけることが必要です(安全が保障されない限りは)。地味な様でいて、なかなか使える機能になるかと思います。(例えば、チャット機能を持ったWebアプリや、単純に文字の入力欄などでも使える機能かなと思います)当サイトでは今後も、Web制作、Webデザインに関する記事を執筆していきます。※この記事は内容の品質向上を目的に、随時更新を行う場合があります。