Html5のクリップボード機能の実装コード

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

この状況は、非入力ボックス内のテキストをクリップボードにコピーする場合に当てはまります。

 <h1 id=content>コピーされたコンテンツ</h1> <button id=button>クリックしてコピー</button> <script> (function(){ button.addEventListener('click', function(){ var copyDom = document . querySelector('#content'); //選択範囲を作成します var range = document.createRange(); // クリップボードからコンテンツを削除します window.getSelection().removeAllRanges(); // 新しいコンテンツをクリップボードに追加します window.getSelection().addRange(range); // var success = document.execCommand( 'copy'); ; try{ var msg = 成功しましたか? 成功しました: 失敗しました。コピー!'); } }) })() </script>

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

 <input type=text id=input value=17373383> <br> <button type=button id=button>入力ボックスの内容をコピーします</button> <script> (function(){ button.addEventListener('click' 、関数 (){ input.select(); document.execCommand('コピー'); })() </script>

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

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

クリップボード.js 公式ウェブサイト

Clipboard.js CDN アドレス

引用：

NPM npm install --save clipboard

CDN <script src=https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js></script>

 <!-- デフォルトでは、.btn 内の data-clipboard-text の属性値をインターセプトします --> <!-- <button class=btn data-clipboard-text=3>Copy</button> --> < !- - 入力ボックスの値をインターセプトします --> <input id=foo value=https://github.com/zenorocha/clipboard.js.git> <!-- トリガー --> <button class=btn data-clipboard-target=#foo> <img src=assets/clippy.svg </button> <script src=https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js></ script> <script> var Clipboard = new ClipboardJS('.btn'); Clipboard.on('success', function (e) { console.log(e) }); クリップボード.on('エラー', 関数 (e) { console.log(e); });

詳細については、クリップボードの公式 Web サイトのロジックを参照してください。

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

 import Vue from 'vue' import VueClipboard from 'vue-clipboard2' VueClipboard.config.autoSetContainer = true // この行を追加 Vue.use(VueClipboard)

サンプル1

 <div id=app></div> <template id=t> <div class=container> <input type=text v-model=message> <button type=button v-clipboard:copy=message v-clipboard:success =onCopy v-clipboard:error=onError>コピー!</button> </div> </template> <script> new Vue({ el: '#app', template: '#t'、データ: function () { return { message: 'これらのテキストをコピー' } }、メソッド: { onCopy: function (e) {alert('コピーしました: ' + e.text) }、onError: function (e) {alert('テキストのコピーに失敗しました') } } }) </script>

サンプル2

 <div id=app></div> <template id=t> <div class=container> <input type=text v-model=message> <button type=button @click=doCopy>コピー!</button> < /div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy These Text' } }, Methods: { doCopy: function () { this.$copyText(this.message).then(function (e) {alert('コピーされました') console.log(e) }, function (e) {alert('コピーできません') console.log(e) }) } } }) </script>

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。