js实现各种复制功能

引用：

<script src="https://clipboardjs.com//dist/clipboard.min.js"></script>

示例1：

Copy
提示：点击Copy按钮，把“hello”复制到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>target-input</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <input id="foo" type="text" value="hello">

    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

    <!-- . Include library -->

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

    <!-- . Instantiate clipboard -->

    <script>

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

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

示例2：

Cut
提示：点击Cut按钮，把“hello”剪切到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>target-textarea</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <textarea id="bar">hello</textarea>

    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>

    <!-- . Include library -->

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

    <!-- . Instantiate clipboard -->

    <script>

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

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

示例3：
hello

Copy
提示：点击Copy按钮，把“hello”复制到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>target-div</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <div>hello</div>

    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

    <!-- . Include library -->

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

    <!-- . Instantiate clipboard -->

    <script>

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

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

示例4：
Copy
提示：点击Copy按钮，把“to be or not to be”复制到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>function-text</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <button class="btn">Copy</button>

    <!-- . Include library -->

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

    <!-- . Instantiate clipboard -->

    <script>

    var clipboard = new Clipboard('.btn', {

        text: function() {

            return 'to be or not to be';

        }

    });

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

示例5：
Copy

hello
提示：点击Copy按钮，把“hello”复制到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>function-target</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <button class="btn">Copy</button>

    <div>hello</div>

    <!-- . Include library -->

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

    <!-- . Instantiate clipboard -->

    <script>

    var clipboard = new Clipboard('.btn', {

        target: function() {

            return document.querySelector('div');

        }

    });

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

示例6：
Copy Copy Copy
提示：
点击第一个Copy按钮，把“1”复制到剪贴板。
点击第二个Copy按钮，把“2”复制到剪贴板。
点击第三个Copy按钮，把“3”复制到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>constructor-selector</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <button class="btn" data-clipboard-text="">Copy</button>

    <button class="btn" data-clipboard-text="">Copy</button>

    <button class="btn" data-clipboard-text="">Copy</button>

    <!-- . Include library -->

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

    <!-- . Instantiate clipboard by passing a string selector -->

    <script>

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

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

示例7：
Copy Copy Copy
提示：
点击第一个Copy按钮，把“1”复制到剪贴板。
点击第二个Copy按钮，把“2”复制到剪贴板。
点击第三个Copy按钮，把“3”复制到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>constructor-nodelist</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <button data-clipboard-text="">Copy</button>

    <button data-clipboard-text="">Copy</button>

    <button data-clipboard-text="">Copy</button>

    <!-- . Include library -->

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

    <!-- . Instantiate clipboard by passing a list of HTML elements -->

    <script>

    var btns = document.querySelectorAll('button');

    var clipboard = new Clipboard(btns);

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

示例8：
Copy
提示：点击Copy，把“1”复制到剪贴板。
html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>constructor-node</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <!-- . Define some markup -->

    <div id="btn" data-clipboard-text="">

        <span>Copy</span>

    </div>

    <!-- . Include library -->

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

    <!-- . Instantiate clipboard by passing a HTML element -->

    <script>

    var btn = document.getElementById('btn');

    var clipboard = new Clipboard(btn);

    clipboard.on('success', function(e) {

        console.log(e);

    });

    clipboard.on('error', function(e) {

        console.log(e);

    });

    </script>

</body>

</html>

官方Demo:http://www.webkaka.com/Blog/ARCHIVES/demo/clipboard.js-master/demo/

js实现各种复制功能的更多相关文章

js写的复制功能，只支持IE
如果用js写,只能支持IE,如果想全支持,需要用jQuery的插件:jquery.zclip.js 下面是用js写的: var copyHref = function(){ ...
JS代码实现复制功能
本人没什么基础看了好久百度,不知道为什么在百度上问一个js实现copy功能会多出那么多代码出来,感觉废话一堆效果还没能达到需要复制的效果. 然而在我看来,js复制代码无非就那么几句罢了.原生cop ...
js点击复制功能的实现
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
JS实现一键复制功能
var copyClick = function (d) { var Url2 = $(d).parent().parent().find("#copy_value"); Url2 ...
H5 页面上使用js实现一键复制功能
2.解决苹果手机浏览器无法使用的问题上面的方法在 iphone 手机 safari浏览器失效的问题其实就是使用输入框先显示然后模拟选择复制在隐藏输入框
禁止页面复制功能 js禁止复制禁用页面右键菜单
<body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: <script t ...
js禁止页面复制禁用页面右键菜单的代码
js实现禁止页面复制功能.禁用页面右键菜单等功能. <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制 ...
解决clipboard.js在移动端复制失败的问题
1.前沿在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是 ...
JQuery实现复制数据到剪贴板之各种麻花与右键点击弹出选择菜单
1.如果小伙伴们只是想实现点击某个按钮(通过click事件)实现复制功能. 那小哥哥我在这里推荐大家使用2个非常好用的插件 (1)clipboard.js:纯js插件,无需flash,相对来说更轻量级 ...

随机推荐

SpringMVC（IntelliJ IDEA）（详细操作）
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.
cd 切换
切换
vue 点击切换图标
<div @click="showImg" class="showSearch"> <img class="header_img&q ...
【JavaWeb项目】一个众筹网站的开发（九）邮件开发
Java官方支持邮件开发,Javax-mail jdk中默认没有,需要另外下载 apache的基于Javax-mail开发了commons-mail,更加简单高效,推荐使用一.电子邮件接收和发送协议 ...
Delphi 打印纸张选项设置参数
{ paper selections } {$EXTERNALSYM DMPAPER_LETTER} DMPAPER_LETTER = 1; { Letter 8 12 x 11 in } {$EXT ...
Vue学习笔记【18】——Vue中的动画（使用过渡类名）
为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能: 使用过渡类名步骤分析需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏 1. 使用 transition 元素, ...
go类c语法
go类c语法一般来说,如果一门语言具有类c语法,意味着当你习惯使用其他类c语言例如c.c++.java.javascript和c#,然后你就会发现go语言和它们也类似,至少表面上是.例如,使用&am ...
HTML5的新增功能有哪些？
HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. 新的功能: 1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的 ...
Read Uncommitted
Read Uncommitted是隔离级别最低的一种事务级别.在这种隔离级别下,一个事务会读到另一个事务更新后但未提交的数据,如果另一个事务回滚,那么当前事务读到的数据就是脏数据,这就是脏读(Dirt ...
composer安装后台模板
先下载composer的windows安装包 cmd切换到源代码所在目录 https://www.cnblogs.com/wgphp/p/8001434.html 安装过程可以参照这篇文章一点问题是 ...

js实现各种复制功能

js实现各种复制功能的更多相关文章

随机推荐

热门专题