ホームページ >ウェブフロントエンド >jsチュートリアル >Clipboard.jsの基本的な使い方を共有する

Clipboard.jsの基本的な使い方を共有する

小云云オリジナル: 2018-03-07 16:13:006428ブラウズ

clipboard.js は、フラッシュなしでテキストをクリップボードにコピーするプラグインです。この記事ではclipboard.jsの基本的な使い方を中心に紹介しますので、参考になれば幸いです。

1 プラグインの紹介

<script src="js/clipboard.min.js"></script>

2 基本的な使用法

まず、DOM セレクター、HTML 要素、または HTML 要素のリストを渡してプラグインをインスタンス化する必要があります。

new Clipboard(&#39;.btn&#39;);

1 ある要素を別の要素のテキストをコピーするトリガーとして使用するには、data-clipboard-target 属性の後に属性セレクターが続く必要があります

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
</button>

別の属性 data-clipboard-action 属性もあります指定する場合コピーまたはカットのどちらかの操作が必要です。デフォルトはコピーです。切り取り操作は、d5fd7aea971a85678ba271703566ebfd 要素または 4750256ae76b6b9d804861d8f69e79d3 要素に対してのみ機能します。

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

2 属性からテキストをコピーします。トリガーとして別の要素は必要ありません。data-clipboard-text 属性を使用して、その後ろにコピーする必要があるテキストを置くことができます。

<button class="btn" data-clipboard-text="Just because you can doesn&#39;t mean you should — clipboard.js">
    Copy to clipboard
</button>

3 その他の指示

1 実行してクリップボードを確認します。.js が Clipboard.isSupported() をサポートしているかどうか、true を返す場合は使用できます。
2 ユーザーフィードバックを表示するか、コピー/カット操作後に選択範囲をキャプチャします。操作、テキスト、トリガー要素

var clipboard = new Clipboard(&#39;.btn&#39;);
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

3 このプラグインはトリガーにイベントデリゲーションを使用するため、DOM 上の操作が大幅に軽減されます。

4 高度な使用法

HTML を変更したくない場合は、非常に便利なコマンド API を使用できます。必要なのは、関数を宣言し、必要な操作を記述して、値を返すことだけです。以下は、異なる ID を持つトリガーに対して異なる値を返す例です。具体的な使用方法については、https://clipboardjs.com

<body>
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
    <!-- Trigger -->
    <button id=&#39;foo_1&#39; class="btn" data-clipboard-target="#foo">
    </button>
</body>
<script>
    new Clipboard(&#39;.btn&#39;, {
        text: function(trigger) {
            if(trigger.getAttribute(&#39;id&#39;)==&#39;foo_1&#39;){
                return 1;
            }else{
                return 2;
            }
        }
    });
</script>

を参照してください。関連する推奨事項:

clipboard.js は HTML ページを使用して情報をクリップボードにコピーします

ZeroClipboard.js は 1 つの Flash を使用して複数のテキストボックスをコピーします

Clipboard.js Flash_javascript ヒントなしの JavaScript コピーアンドペーストライブラリ

以上がClipboard.jsの基本的な使い方を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：angularJS 時間フォーマットフィルターの詳細な説明次の記事：angularJS 時間フォーマットフィルターの詳細な説明

続きを見る