【javascript】js实现复制、粘贴
使用document.ExecCommand("copy")命令，官方文档，点我。
例如：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function copyLink(){
var e = document.getElementById("copy");
e.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("内容复制成功！");
}
</script>
</head>
<body>
<textarea id="copy">待复制的内容</textarea>
<input type="button" onclick="copyLink()" value="点击复制"></input>
</body>
</html>
在复制中，使用最多的就是clipboard.min.js插件了，点我查看下载地址，点我查看官方文档
<body>
<p>通过text参数来进行复制操作</p>
<button class="btn">复制</button> </body>
<script src="js/version/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.btn', {
text: function() {
return '这里是text参数返回的内容 - Hello yubai8';
}
}); clipboard.on('success', function(e) {
alert("文字已复制到剪贴板中");
console.log(e);
}); clipboard.on('error', function(e) {
alert("异常错误： " + JSON.stringify(e.message));
console.log(e);
});
</script>
也可以像下面这样：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head> <body>
<div>欢迎光临 yubai9</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button> <script src="js/version/clipboard.min.js"></script> <script>
var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) {
alert("文字已复制到剪贴板中");
console.log(e);
}); clipboard.on('error', function(e) {
alert("异常错误： " + JSON.stringify(e));
console.log(e);
});
</script>
</body> </html>
clipboard.min.js插件并不是兼容所有的浏览器。
如果不需要显示定义textarea后再复制，可以这样做。先创建一个textarea元素，然后进行复制，最后再把这个元素删除掉。下面显示了使用的过程：
var text="需要复制的内容";
var element = $("<textarea>" + text + "</textarea>");
$("body").append(element);
element[0].select();
document.execCommand("Copy");
element.remove();
原文链接：
【javascript】js实现复制、粘贴的更多相关文章
- js 实现复制粘贴
js 实现复制粘贴 <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" ...
- js 实现复制粘贴文本过滤（保留文字和图片）
实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...
- 通过如何通过js实现复制粘贴功能
在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...
- Javascript禁止网页复制粘贴效果，或者复制时自动添加来源信息
一.禁止复制 使用方法:在oncopy事件中return false oncopy="return false;" 1.禁止复制网页内容 <body oncopy=" ...
- js实现复制粘贴功能
在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...
- [JavaScript] 怎么使用JS禁止复制粘贴
1. 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格键右边的windows键也可以激活这个快捷菜单 <table border oncontextmenu=re ...
- 在html页面通过js实现复制粘贴功能
前言:要实现这个功能,常用的方式大概分为两类,第一种就是上插件,这个网上有大把,第二种就是直接用几行JS来实现. 这次说第二种实现方式,这方式有很大的局限性,只能用表单元素,并且不能设置disable ...
- JS ----实现复制粘贴功能 (剪切板应用clipboardData)
注意:ie7,与ie8 对网页有个复制的权限,需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象 提供了对剪贴板的访问. 三个方法 :1.clearData(sDataFor ...
- js 实现复制粘贴时注意方法中需要两次点击实现的bug
方法一:利用ZeroClipboard 详见 :http://www.jb51.net/article/22403.htm 1先引入 <script type="text/javasc ...
- js 禁止复制粘贴
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格 ...
随机推荐
- （转）Unity3D研究院之将场景导出XML或JSON或二进制并且解析还原场景
自:http://www.xuanyusong.com/archives/1919 导出Unity场景的所有游戏对象信息,一种是XML一种是JSON.本篇文章我们把游戏场景中游戏对象的.旋转.缩放.平 ...
- 浅谈压缩感知（九）：正交匹配追踪算法OMP
主要内容: OMP算法介绍 OMP的MATLAB实现 OMP中的数学知识 一.OMP算法介绍 来源:http://blog.csdn.net/scucj/article/details/7467955 ...
- Discuz常见小问题-如何为每个板块设置不同的图标
进入后台的论坛-版块管理,选中要修改图标的板块,点击后面的编辑 在板块图标中找到图标文件,一般是PNG或者GIF,大小为32X32,提交之后效果如下
- Word批量调整插入图片大小
做标书,word中需要插入大量图片,实为一些证书.文件的扫描文件.但插入后,大小不是想要的,太小了,打印出来看不清.需要调整,需要批量调整. 这是一个不错的方法: 选中第一张图片,按页面调整大小到适合 ...
- 【Linux】Ubuntu配置服务自启动 sysv-rc-conf
在Ubuntu下,配置服务系统开机自启动,使用的不是chkconfig,而是sysv-rc-conf. 且看如下: 安装: sudo apt-get install sysv-rc-conf 帮助信息 ...
- JAVA中使用Apache HttpComponents Client的进行GET/POST请求使用案例
一.简述需求 平时我们需要在JAVA中进行GET.POST.PUT.DELETE等请求时,使用第三方jar包会比较简单.常用的工具包有: 1.https://github.com/kevinsawic ...
- JAVA设计模式——第 5 章 工厂方法模式【Factory Method Pattern】（转）
女娲补天的故事大家都听说过吧,今天不说这个,说女娲创造人的故事,可不是“造人”的工作,这个词被现代人滥用了.这个故事是说,女娲在补了天后,下到凡间一看,哇塞,风景太优美了,天空是湛蓝的,水是清澈的,空 ...
- ES6学习笔记五：Promise异步任务
一:Promise对象 Promise对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和Rejected(已失败). 二:创建与使用 v ...
- PowerDesigner使用笔记
一:PDM模版使用 1:新建model:File——new model——选择PDM,填上名字.数据库类型 2:右侧工具类使用 3:创建表与配置 点击右侧工具栏中table控件,移动到模版面板内点击一 ...
- Java项目持续集成检查项
1) 检查项:使用Super POM. 2) 检查项:GroupID应该以特定名称开头.3) 检查项:版本号符合规范.版本号必须是三段数字,之后加或不加-SNAPSHOT.4) 检查项 ...