この記事では主に HTML5 のクリップボード関数の実装コードを紹介します。内容は非常に優れているので、参考として共有します。

私は最近、Vue を使用して Line (中国の WeChat に似た日本と韓国のプラットフォーム) の組み込み H5 を開発しました。要件の 1 つは、現在のリンクを貼り付けて、それを PC に送信し、コンピューター上で開くことです。すべてのコレクションでいくつかの状況が見つかりました:

1. 入力ボックスのないネイティブ js メソッド

この状況は、入力ボックス以外のテキストをクリップボードにコピーするのに適しています

は、入力領域とテキストエリアのテキストをコピーするために使用されます

被复制的内容
 点击复制 

このメソッドは拡張することもでき、メソッド 1 と同じ目的を果たします。入力ボックスを動的に作成し、その内容をコピーする内容に設定し、最後に入力ボックスを削除または非表示にします。

3.js コンテンツをクリップボードプラグイン(clipboard.js)にコピー

clipboard.js公式サイト

引用方法:

CDN
npm install --save clipboard
CDN

 
 复制输入框中内容 

内部には多くの高度な使用方法があり、詳細については公式 Web サイトのロジックにアクセスしてください。 Clipboard 公式 Web サイト

4. Vue フレームワークによって提供されるクリップボード プラグイン vue-clipboard2

Sample1

import Vue from 'vue' import VueClipboard from 'vue-clipboard2' VueClipboard.config.autoSetContainer = true // add this line Vue.use(VueClipboard)

Sample2

その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

以上がHTML5のクリップボード機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。