原生js实现复制

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>copy</title>
</head>
<body>
<span id='copy'>复制哈哈哈哈啊哈哈</span>
<button id='btn'>复制</button>
</body>
<script type="text/javascript">
function copyText()
{
var Url2=document.getElementById("copy").innerText;
var oInput = document.createElement('input');
oInput.value = Url2;
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
oInput.className = 'oInput';
oInput.style.display='none';
alert('复制成功');
}
document.getElementById('btn').onclick = function() {
copyText()
}
</script>
</html>

上线代码只是我在 脚本之家 看见的一段代码,上面还有很多实现复制的方法,这些方法如果只是用在PC端那么已经够了,如果要使用在移动端, Android高版本没有任何问题,但是IOS不管是什么版本都无法实现复制

clipboard.js实现复制

为什么要是用clipboard.js

复制文本到剪切板并不难, 它不需要很多个步骤或者加载很多KB的代码来完成, 最重要的是, 它不应该依赖于Flash或者任何臃肿的框架, 这就是clipboard.js开发的目的

install

你可以通过npm来获取它

npm install clipboard --save

如果你不用install, 可以下载一个ZIP文件

创建

首先将dist上面的js或者第三方提供的文件引入到网页中

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

然后需要通过传递DOM选择器,HTML元素或者HTML列表来实例化它

new Clipboard('.btn');

在内部我们需要获取与你选择器所匹配的元素,并为每个元素添加监听器,但是有一个问题,如果你有数百个匹配项, 那这个方法会消耗大量的内存.

基于这个问题, 我们可以用事件代理, 它只用一个监听器来代替多个监听器

用法

我们可以利用HTML自定义属性来提高代码的可用性 一个非常常用的列子就是点击某个按钮复制另一个元素的内容,你可以通过 data-clipboard-target 自定义属性来实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>main</title>
<script src="dist/clipboard.min.js"></script>
</head>
<body>
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
</body>
<script type="text/javascript">
new Clipboard('.btn');
</script>
</html>

从一个元素中剪切文本

你可以定义一个属性data-clipboard-action来指定是要copy还是cut, 如果省略这个属性,会默认设置copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>main</title>
<script src="dist/clipboard.min.js"></script>
</head>
<body>
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
</body>
<script type="text/javascript">
new Clipboard('.btn');
</script>
</html>

正如你所想的一样,这个cut属性只适用于<input /><textarea></textarea>元素

从属性复制文本

事实上你不需要其他元素来复制它的内容,你可以再出发元素上包含一个 data-clipboard-text属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>main</title>
<script src="dist/clipboard.min.js"></script>
</head>
<body>
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
</body>
<script type="text/javascript">
new Clipboard('.btn');
</script>
</html>

事件

在实际开发用,你需要显示一些用户反馈,不如复制/剪切成功这样的提示语,这就是我们为什么要写一些事件,比如successerror一起来实现你的定制逻辑

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>main</title>
<script src="dist/clipboard.min.js"></script>
</head>
<body>
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
</body>
<script type="text/javascript">
var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger); e.clearSelection();
}); clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>
</html>

高级用法

如果你不想修改你的HTML,那么你可以使用一个非常方便的API, 所有你要做的一些事情都包含在一个function中, 在和这个函数中写你的逻辑,并且返回一个值

列如你需要动态设置一个target,你需要返回一个节点

new Clipboard('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});

如果你想动态设置一个text,你需要返回一个字符串

new Clipboard('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});

为了在Bootstrap Modals或任何其他更改焦点的库中使用,您需要将聚焦的元素设置为container值

new Clipboard('.btn', {
container: document.getElementById('modal')
});

另外,如果您正在使用单页面应用程序,则可能需要更精确地管理DOM的生命周期。以下是清理我们创建的事件和对象的方法

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

浏览器支持

这个库依赖于SelectionexecCommand API,第一个支持所有浏览器,第二个支持以下浏览器

chrome edg firefox IE Opera Safari
42+ 12+ 41+ 9+ 29+ 10+

如果你需要兼容低版本的浏览器 clipboard .js会优雅降级

你所要做的就是显示一个工具提示,说明Copied何时success调用事件,以及Press Ctrl+C to copy何时error调用事件,因为文本已经被选中

您还可以通过运行来检查是否支持clipboard.js Clipboard.isSupported(),这样您就可以隐藏UI中的复制/剪切按钮

参考链接

官网地址

github地址

我的个人博客,欢迎大家访问

js 实现复制剪切的更多相关文章

  1. JS 操作复制剪切粘贴

    测试了很多次之后,虽然有点细碎的突破,但还是想说,麻辣隔壁... 众所周知使用 oncut/oncopy/onpaste 监听剪切板,采用 window.clipboardData 并不是适用于大多浏 ...

  2. js实现复制|剪切指定内容到粘贴板--clipboard

    这是著名开源项目 clipboard.js 的 README.md,里面讲解的更加详细,有兴趣的同学可以了解一下.项目地址:https://github.com/zenorocha/clipboard ...

  3. js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中(转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 纯js实现复制到剪贴板功能

    在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...

  5. 【转】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  6. vi学习 常用命令-新建-复制-剪切-粘贴

    mkdir /home/brandon.du/desktop/mylinux/test_1.txt   ---------mkdir新建文件夹 rm /home/brandon.du/desktop/ ...

  7. 【原】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  8. vim选中字符复制/剪切/粘贴

    转载自:http://www.cnblogs.com/luosongchao/p/3193153.html 问题描述: vim 中选中指定字符,进行复制/剪切/粘贴 选择:1.普通模式下--v+hjk ...

  9. JS实现复制网页内容自动加入版权内容代码和原文链接

    JS实现复制网页内容自动加入版权内容代码和原文链接 实现代码:在body内放入如下代码即可: <script type="text/javascript"> var S ...

随机推荐

  1. Vboxmanage改动uuid报错的解决的方法

    我的环境: Virtualbox 4.3.10 r93012 操作系统:win7 问题:Virtualbox在使用拷贝的虚拟盘时会提示uuid冲突: Because a hard disk with ...

  2. bzoj1513【POI2006】Tet-Tetris 3D

    1513: [POI2006]Tet-Tetris 3D Time Limit: 30 Sec  Memory Limit: 162 MB Submit: 733  Solved: 245 [Subm ...

  3. 微信小程序的Web API接口设计及常见接口实现

    微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...

  4. 深入理解计算机系统_3e 第四章家庭作业(部分) CS:APP3e chapter 4 homework

    4.52以后的题目中的代码大多是书上的,如需使用请联系 randy.bryant@cs.cmu.edu 更新:关于编译Y86-64中遇到的问题,可以参考一下CS:APP3e 深入理解计算机系统_3e ...

  5. mybatis 整合spring之mapperLocations配置的问题

    今天尝试spring整合mybatis时遇到这么一个问题,就是在配置sqlSessionFactory时是否要配置mapperLocations的问题. <bean id="sessi ...

  6. 配置nginx支持path_info模式

    简介:我们用thinkphp,CodeIgniter框架的时候,地址基本都是IP/index.php/group_controller?***的模式,通过index.php入口访问php文件 这种模式 ...

  7. 9.python面向对象编程

    面向对象的几个核心特性如下 Class 类一个类即是对一类拥有相同属性的对象的抽象.蓝图.原型.在类中定义了这些对象的都具备的属性(variables(data)).共同的方法 Object 对象 一 ...

  8. 当前时间、前n天、后n天、取前n条记录、从第n条开始取m条

    当前时间:NOW() 前n天:DATE_SUB(NOW(),INTERVAL n DAY) 后n天:DATE_SUB(NOW(),INTERVAL -n DAY) 取前n条记录:SELECT * FR ...

  9. 修改文件系统属性chattr,查看文件系统属性lsattr

    chattr chattr +i 文件或目录 , chattr +a 文件或目录,chattr -i 文件或目录,chattr -a 文件或目录,chattr =i 文件或目录,chattr =a 文 ...

  10. Microsoft Visual Studio 2012旗舰版(VS2012中文版下载)官方中文版

    Microsoft Visual Studio 2012 Ultimate旗舰版(VS2012中文版下载)是一个最先进的开发解决方案,它使各种规模的团队能够设计和创建出使用户欣喜的引人注目的应用程序. ...