ClipboardJS - 開発と学習のまとめ 1

問題の要件の説明:

これは会社の内部アプリであるため、セキュリティとプライバシーに関係するアプリ内のコピーやスクリーンショットさえも許可されていません.

H5ページはアプリに埋め込まれており、コピーボタンでテキストをコピーできます!

解決:

テキストをクリップボードにコピーする js プラグインである ClipboardJS はフラッシュを使用せず、最小値はわずか 3k です

1.使い方:

npm install: npm i クリップボード --save

CDNインストール:<script src="dist/clipboard.min.js"></script>

2. DOM セレクター、HTML 要素、または HTML 要素のリストを渡して、clipboard.js インスタンスを作成します。

<div id="temp_text">私はコピーが必要なテキストです</div>

<button class="copy_btn" data-clipboard-target="#temp_text">ワンクリックでコピー</button>

var clipboard = new Clipboard('.copy_btn');

clipboard.on('成功', function(e) {

        console.info('Action:', e.action);

        console.info('Text:', e.text);

        console.info('トリガー:', e.trigger);

        e.clearSelection();

});

clipboard.on('エラー', function(e) {

        console.error('Action:', e.action);

        console.error('Trigger:', e.trigger);

});

3. その他の物件説明

 data-clipboard-target: トリガー要素の data-clipboard-target 属性に含まれる値は、別の要素のセレクターと一致する必要があります

<div id="temp_text">私はコピーが必要なテキストです</div>

<button class="copy_btn" data-clipboard-target="#temp_text">ワンクリックでコピー</button>

data-clipboard-text: 必ずしも別の要素からコンテンツをコピーする必要はありません。また、トリガー要素に data-clipboard-text 属性を含めて、その属性のコンテンツをコピーすることもできます。

<button class="copy_btn" data-clipboard-text="私はコピーされたテキストです">私は自分の属性でテキストをコピーします</button>

data-clipboard-action: コンテンツをコピーするか切り取るかを指定します。値 cut は、切り取り操作を実行することを意味します。この属性を省略すると、デフォルトでコピーが使用されます

<div id="temp_text">私はコピーが必要なテキストです</div>

<button class="copy_btn" data-clipboard-target="#temp_text" data-clipboard-action="cut">一键剪切</button>

おすすめ

転載: blog.csdn.net/Mr_LiuP/article/details/125498720