(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 つの方法
同僚からよく聞かれるのですが、ファイル/ディレクトリを削除すると「操作は許可されていません」というエ...
適応型レイアウトは、実際のアプリケーションでますます一般的になっています。今日は、主にフローティング...
目次意味文法例1. 初期値initが渡されない2. 初期値を渡す場合3. アレイの重複排除4. Re...
GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...
今夜の夕食後にノートパソコンの電源を入れたところ、問題が発生しました。通常、コンピューターがスリープ...
アンカーリンクをクリックするとスムーズにスクロールし、自由にトップ位置に調整できます。 1. アンカ...
Linux のデフォルトの ssh リモート ポートは 22 です。デフォルトのポートは、悪意のある...
1.ハードディスクを追加する2. パーティションの状態を確認します: fdisk -l 3. パーテ...
序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...
展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....
Mysql はクエリ結果セットを JSON データに変換します 序文 学生テーブル 学生スコアテーブ...
この記事は、IDEA で Web プロジェクトを作成し、Tomcat を構成する方法についての統合記...
ドロップダウンボックス、テキストフィールド、ファイルフィールド 上半分はデモンストレーション効果、下...
最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...
通常の開発では、凸型の丸い角、つまり border-radius 属性を使用するのが一般的です。凹角...