JS pc側と移動側が共同でクリップボードにコピーする機能を実現
7713 ワード
JS pc端子と移動端子はクリップボードにコピーする機能を実現する
ウェブページ上でテキストをクリップボードにコピーするのは、一般的にJS+Flashを組み合わせた方法で、ネット上では多くの関連記事が紹介されています.HTML 5技術の発展に伴い、Flashは多くの場合に適用されず、遮蔽されている.本稿で紹介するJSプラグインでは、テキストをクリップボードにコピーする純粋なJSメソッドを実現しています.
プラグイン名はClipboardです.jsは、Flashではなく、最新のHTML 5に依存してSelection APIとexecCommand APIを発売している.
Github:https://github.com/zenorocha/clipboard.js
npm方式でインストールできます.
npm install clipboard --save
まず、ページに導入する必要があります.
script>
htmlコードを直接入力します.
参照先:
https://www.cnblogs.com/52fhy/p/5383813.html
ウェブページ上でテキストをクリップボードにコピーするのは、一般的にJS+Flashを組み合わせた方法で、ネット上では多くの関連記事が紹介されています.HTML 5技術の発展に伴い、Flashは多くの場合に適用されず、遮蔽されている.本稿で紹介するJSプラグインでは、テキストをクリップボードにコピーする純粋なJSメソッドを実現しています.
プラグイン名はClipboardです.jsは、Flashではなく、最新のHTML 5に依存してSelection APIとexecCommand APIを発売している.
Github:https://github.com/zenorocha/clipboard.js
npm方式でインストールできます.
npm install clipboard --save
まず、ページに導入する必要があります.
htmlコードを直接入力します.
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制功能实现title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1.0, minimum-scale=1.0">
<script src ="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js">script>
head>
<body>
<input class="foo" value="这里是内容">
<span class="fdd">阿斯顿发斯蒂芬阿斯蒂芬span>
<button class="btn" data-clipboard-target=".foo">点击复制button>
<button class="btn" data-clipboard-target=".fdd">点击复制button>
<script src ="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js">script>
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
alert("复制成功!");
e.clearSelection();
});
clipboard.on('error', function(e) {
alert("复制失败!");
});
script>
body>
html>
参照先:
https://www.cnblogs.com/52fhy/p/5383813.html