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 つの方法

推薦する

Dockerの国内イメージソースを変更する方法

Dockerデーモンのアクセラレータを構成する設定ファイルから Docker を起動し、/etc/d...

HTML でランダムロールコーラーを実装するためのサンプルコード

この点呼装置は簡易版であり、自動停止の必要性を考慮していないため、点呼を開始した後、停止ボタンをクリ...

Vue は、デスクトップから Web ページにファイルをドラッグするためのサンプル コードを実装します (画像/オーディオ/ビデオを表示できます)

効果使用する場合は、コードとスタイルを自分で最適化してください。画像を表示しない/ビデオとオーディオ...

JavaScript offsetParent のケーススタディ

1. offsetParentの定義: offsetParentは子要素に最も近い位置に配置された親...

Bootstrap 3.0 学習ノートボタンスタイル

この記事では主にボタンのスタイルについて説明します。 1. オプション2. サイズ3. 活動状況4....

iframe テクニックを使用して訪問者 QQ 実装のアイデアとサンプル コードを取得する

今日、仕事中に、一時的に追加した友人から、Web ページを使用して訪問者の QQ を取得する方法を尋...

MySQL 上級学習インデックスの長所と短所、使用ルール

1. インデックスの利点と欠点利点: 高速検索、高速グループ化および並べ替えデメリット: ストレージ...

MySQL の左結合操作における on 条件と where 条件の違いの紹介

優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...

どのような種類の MYSQL 接続クエリを知っていますか?

序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...

仮想マシンのディスクサイズを拡張する方法

Vmvare が仮想マシンのディスク サイズを設定した後、ディスク領域が不足していることがわかりまし...

dig/nslookup コマンドを使用して DNS 解決手順を表示する方法

dig - DNS ルックアップ ユーティリティドメイン名のアクセス障害が発生した場合、ドメイン名の...

Vue+express+Socketでチャット機能を実現

この記事では、チャット機能を実現するためのVue+express+Socketの具体的なコードを参考...

Hbase 入門

1. HBaseの概要1.1 HBaseとはHBase は、高い信頼性、高いパフォーマンス、列ストレ...

JS の querySelector メソッドと getElementById メソッドの違い

目次1. 概要1.1 querySelector() と querySelectorAll() の使...

deepin apt コマンドを使用して最新バージョンの docker をインストールする方法

ステップ1: Ubuntuソースを追加するルートに切り替える suルートソフトウェアソースファイルの...