テキストコピー

デモ

押してください

このテキストをコピーします。
1234567890
ABCDEFGHIJKLMN

JSコードコピー

使い方

コピーのトリガーになる任意の要素を用意し、data-jscopyand="copytext"を付与してください。
コピーされるテキストを用意し、それを囲う要素に任意のidを付与してください。
コピーのトリガーになる要素にdata-jscopyand-attributes="id名"を付与してください。

サンプルHTMLを表示する

解説

JSコードの解説を見てみる

このテキストコピー機能は1画面で複数の設置を想定しているため、document.querySelectorAllでトリガーとなる全ての要素を取得し、変数に格納します。

取得した全トリガー要素に対して反復処理を行い、イベントを設定していきます。

トリガー要素が持っているdata-jscopyand-attributes属性を使い、コピーの対象となる要素を特定します。
もしも対象の要素が存在しなかった場合は処理を終了します。

コピーにはwindow.navigator.clipboard.writeTextという機能を使用します。
引数にコピーする文字列target.innerTextを渡します。
コピーが完了した時の処理をthenというメソッドに関数を渡してしています。
本デモではアラートでコピー完了をお知らせします。

ヘルプ・コンタクト

機能に関するご質問は、このページの下部に表示されている Twitter のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM 等でご連絡ください。

他のコードを探す

リクエスト受付中です。
Twitter の固定ツイートか DM にてご連絡ください。