clipboard.js の使用法の概要

clipboard.js の使用法の概要

(1)はじめに:

clipboard.js は、テキストをクリップボードにコピーする機能を実装する軽量の JavaScript プラグインです。このプラグインは、入力ボックス、テキストフィールド、DIV要素内のテキストなどのテキストコンテンツをクリップボードにコピーできます。

clipboard.js は、主流のブラウザをサポートしています: Chrome 42+、Firefox 41+、IE 9+、Opera 29+、Safari 10+。

(2)クリップボードの内容をコピーする方法は次のとおりです。

関数を通じてターゲットからターゲット コンテンツをコピーします。コピーされるコンテンツは属性を通じて返されます。
target はターゲット コンテンツをコピーしますが、ここでは説明しません。関数と属性の操作についてのみ説明します。

(3)関数演算には2種類ある。

最初のもの:

ターゲット関数はコンテンツをコピーします。ターゲットはコピーするノードを指定します。ここでは、戻り値は 'hello' です。

   <button class="btn">Copy_target</button>
   <div>こんにちは</div>

   <スクリプト>
   var クリップボード = 新しいクリップボード('.btn', {
   // ターゲットを通じてコピーするノードを指定する target: function() {
                  document.querySelector('div') を返します。
             }
   });

   clipboard.on('成功', 関数(e) {
       コンソールログ(e);
   });

   clipboard.on('エラー', 関数(e) {
       コンソールログ(e);
   });
   </スクリプト>

2番目のタイプ:

テキスト機能を使用してコンテンツをコピーする
テキスト関数によって指定されたコピーコンテンツは、ここでは「to be or not to be」を返します。

<button class="btn">コピー</button>
<スクリプト>
   var クリップボード = 新しいクリップボード('.btn', {
   // コピーボタンをクリックし、コピーした内容をテキストで直接返します text: function() {
           「存在するか、存在しないか」を返します。
       }
   });

   clipboard.on('成功', 関数(e) {
       コンソールログ(e);
   });

   clipboard.on('エラー', 関数(e) {
       コンソールログ(e);
});

(4)コピーしたコンテンツを属性を通じて返す

タイプ 1: 単一ノード

ノード オブジェクトを ID で指定し、それをパラメーターとしてクリップボードに送信します。ここでの戻り値はdata-clipboard-textの内容です

// ID で data-clipboard-text の内容を取得します <div id="btn" data-clipboard-text="1">
        <span>コピー</span>
</div>
 
<スクリプト>
    var btn = document.getElementById('btn');
    var クリップボード = 新しいクリップボード(btn);
 
    clipboard.on('成功', 関数(e) {
        コンソールログ(e);
    });
 
    clipboard.on('エラー', 関数(e) {
        コンソールログ(e);
    });
</スクリプト>

2番目: マルチノード

クラスを通じてすべてのボタンを取得し、パラメーターとしてクリップボードに送信します。各ボタンをクリックすると、対応するデータ クリップボード テキストの内容がそれぞれ 1、2、3 として返されます。

// クラスを通じて複数のボタンを登録し、data-clipboard-text の値を取得します <button class="btn" data-clipboard-text="1">Copy</button>
    <button class="btn" data-clipboard-text="2">コピー</button>
    <button class="btn" data-clipboard-text="3">コピー</button>
 <スクリプト>
    var クリップボード = 新しいクリップボード('.btn');
 
    clipboard.on('成功', 関数(e) {
        コンソールログ(e);
    });
 
    clipboard.on('エラー', 関数(e) {
        コンソールログ(e);
    });
    </スクリプト>

(5)機能と属性の互換性

関数:

//ClipboardJS.isSupported() //--------この文は: 互換性がありますか? var clipboard = new Clipboard('.btn');
// 正常なダウングレード: Safari のバージョン番号が 10 以上の場合、コピーが成功したことを示すプロンプトが表示されます。それ以外の場合は、テキストを選択した後、手動で「コピー」を選択してコピーする必要があることを示すプロンプトが表示されます。clipboard.on('success', function(e) {
    alert('コピー成功!')
    e.clearSelection();
});
clipboard.on('エラー', 関数(e) {
    alert('コピーするには「コピー」を選択してください!')
// 警告を削除しようとすると、システムの「コピー」ツールがポップアップすることがありますが、ポップアップするにはボタンを 2 回クリックする必要があります。具体的な理由は不明です。上の画像を参照してください。 iOS は単純に on イベントをサポートしていないため、トリガーの場所に空のクリック イベント ( οnclick="" ) を書き込んでみることができると言う人もいます}); 

財産:

<画像
   src="../../../../assets/images/zuop_award/copy_link.png"
      @click="コピー"
      データクリップボードアクション="コピー"
      クラス="メール"
      :data-clipboard-text="'[email protected]'"
    /> 

-------------------
  コピー() {
     var クリップボード = 新しいクリップボード(".email")
     // console.log(クリップボード);
     clipboard.on("成功", e => {
       // console.log("コピー成功", e);
       トースト({
         メッセージ: 「コピー成功」
       })
       // メモリを解放する clipboard.destroy()
     })
     clipboard.on("エラー", e => {
       // Toast({のコピーはサポートされていません
         メッセージ: 「携帯電話の権限ではコピー機能はサポートされていません」
       })
       console.log("このブラウザは自動コピーをサポートしていません")
       // メモリを解放する clipboard.destroy()
     })
   }

clipboard.jsの使い方まとめは以上です。clipboard.jsの使い方についてもっと知りたい方は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue は Clipboard.JS を使用して h5 ページのコンテンツ例をコピーします。
  • Vue で clipboard.js を使用してワンクリックでテキストをコピーする例
  • clipboard.js を使用してコピー機能を実装するサンプルコード
  • ZeroClipboard.jsは1つのフラッシュを使用して複数のテキストボックスをコピーします

<<:  CSS の境界線を通して三角形と矢印を実装するサンプルコード

>>:  Tomcat で JNDI データ ソースを構成する 3 つの方法

推薦する

Linux でファイルを削除するときに「操作は許可されていません」というプロンプトが表示される場合の対処方法

同僚からよく聞かれるのですが、ファイル/ディレクトリを削除すると「操作は許可されていません」というエ...

適応レイアウトの処理について(フロートとマージンネガティブマージンを使用)

適応型レイアウトは、実際のアプリケーションでますます一般的になっています。今日は、主にフローティング...

JSはreduce()メソッドを使用してツリー構造データを処理します

目次意味文法例1. 初期値initが渡されない2. 初期値を渡す場合3. アレイの重複排除4. Re...

15 分で学べる並列アーティファクト GNU Parallel 入門ガイド

GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...

VMware Workstation Pro が Win10 アップデートにより開けなくなる問題の解決方法

今夜の夕食後にノートパソコンの電源を入れたところ、問題が発生しました。通常、コンピューターがスリープ...

JSのアンカーリンクをクリックするとスムーズにスクロールし、自由にトップ位置に調整できます。

アンカーリンクをクリックするとスムーズにスクロールし、自由にトップ位置に調整できます。 1. アンカ...

Linux sshのデフォルトのリモートポート番号を変更する6つの手順

Linux のデフォルトの ssh リモート ポートは 22 です。デフォルトのポートは、悪意のある...

LinuxでLVMディスクを拡張する詳細な手順

1.ハードディスクを追加する2. パーティションの状態を確認します: fdisk -l 3. パーテ...

PC/Pad/Phoneデバイスに自動的に適応するCSSウェブページレスポンシブレイアウト

序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...

MySql8.0以降のバージョンでROOTパスワードを正しく変更する方法

展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....

Mysql クエリの結果セットを JSON データに変換するサンプル コード

Mysql はクエリ結果セットを JSON データに変換します 序文 学生テーブル 学生スコアテーブ...

IDEA2020.1.2 Webプロジェクトの作成とTomcatの設定に関する詳細なチュートリアル

この記事は、IDEA で Web プロジェクトを作成し、Tomcat を構成する方法についての統合記...

HTML リスト ボックス、テキスト フィールド、ファイル フィールドのサンプル コード

ドロップダウンボックス、テキストフィールド、ファイルフィールド 上半分はデモンストレーション効果、下...

Dockerコンテナがホストポートにアクセスできない場合の解決策

最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...

CSS で div 凹角スタイルを実装するサンプル コード

通常の開発では、凸型の丸い角、つまり border-radius 属性を使用するのが一般的です。凹角...