(1)はじめに: clipboard.js は、テキストをクリップボードにコピーする機能を実装する軽量の JavaScript プラグインです。このプラグインは、入力ボックス、テキストフィールド、DIV要素内のテキストなどのテキストコンテンツをクリップボードにコピーできます。 clipboard.js は、主流のブラウザをサポートしています: Chrome 42+、Firefox 41+、IE 9+、Opera 29+、Safari 10+。 (2)クリップボードの内容をコピーする方法は次のとおりです。関数を通じてターゲットからターゲット コンテンツをコピーします。コピーされるコンテンツは属性を通じて返されます。 (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番目のタイプ: テキスト機能を使用してコンテンツをコピーする <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をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS の境界線を通して三角形と矢印を実装するサンプルコード
>>: Tomcat で JNDI データ ソースを構成する 3 つの方法
Dockerデーモンのアクセラレータを構成する設定ファイルから Docker を起動し、/etc/d...
この点呼装置は簡易版であり、自動停止の必要性を考慮していないため、点呼を開始した後、停止ボタンをクリ...
効果使用する場合は、コードとスタイルを自分で最適化してください。画像を表示しない/ビデオとオーディオ...
1. offsetParentの定義: offsetParentは子要素に最も近い位置に配置された親...
この記事では主にボタンのスタイルについて説明します。 1. オプション2. サイズ3. 活動状況4....
今日、仕事中に、一時的に追加した友人から、Web ページを使用して訪問者の QQ を取得する方法を尋...
1. インデックスの利点と欠点利点: 高速検索、高速グループ化および並べ替えデメリット: ストレージ...
優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...
序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...
Vmvare が仮想マシンのディスク サイズを設定した後、ディスク領域が不足していることがわかりまし...
dig - DNS ルックアップ ユーティリティドメイン名のアクセス障害が発生した場合、ドメイン名の...
この記事では、チャット機能を実現するためのVue+express+Socketの具体的なコードを参考...
1. HBaseの概要1.1 HBaseとはHBase は、高い信頼性、高いパフォーマンス、列ストレ...
目次1. 概要1.1 querySelector() と querySelectorAll() の使...
ステップ1: Ubuntuソースを追加するルートに切り替える suルートソフトウェアソースファイルの...