1.CSS实现复制功能

body {unselectable: all;-moz-user-select: all;onselectstart: all;-webkit-user-select: all;
}

给body设置这四个属性，就可以右键进行复制了。

2.使用clipboard.js进行复制

js文件下载地址：https://clipboardjs.com/

单个复制的写法(可以直接复制粘贴使用)：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制粘贴</title>
</head>
<body><a href="javascript:void(0);" id="rcopy" onclick="copy('a','b')">点我复制</a><script src="../lib/clipboard.js"></script><script src="../lib/jquery-2.1.4.js"></script><script type="text/javascript">function copy(a,b) {var clipboard = new ClipboardJS('#rcopy', {text : function() {return a + '-' + b;}});clipboard.on("success", function(e) {console.log(e);alert(e.text+'复制成功');clipboard.destroy();});clipboard.on("error", function(e) {console.log(e);alert('复制失败');clipboard.destroy();});}</script>
</body>
</html>

对ajax请求回来的数据动态的对单个数据进行复制(不可直接复制粘贴使用)：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制粘贴</title>
</head>
<body><script src="../lib/clipboard.js"></script><script src="../lib/jquery-2.1.4.js"></script><script type="text/javascript">//此处的html为ajax请求之后向页面添加元素var html= '<a href="javascript:void(0);" id="rcopy'+r[i][1]+r[i][2]+'" onclick="copy(\''+r[i][1]+'\',\''+r[i][2]+'\')"></a>';  function copy(a,b) {var clipboard = new ClipboardJS('#rcopy' + a + b, {text : function() {return a + '-' + b;}});clipboard.on("success", function(e) {console.log(e);alert(e.text+'复制成功');clipboard.destroy();});clipboard.on("error", function(e) {console.log(e);alert('复制失败');clipboard.destroy();});}</script>
</body>
</html>

如果使用clipboard.js过程中出现：Clipboard is not defined这样的报错，看下引用的clipboard.js的版本号：

2.0.4对应上面的对clipboard.js进行实例化的代码new ClipboardJS，版本为1.7.1之类的实例化时使用new Clipboard。（注：此处为小编个人理解，如有不对，请多指教。）

HTML实现复制功能相关推荐

使用文件操作函数实现：文件的复制功能。
2019独角兽企业重金招聘Python工程师标准>>> //使用文件操作函数实现:文件的复制功能. #include <stdio.h> #include <std ...
配置发布和禁用复制功能时提示分发服务器未正确安装。
错误提示(配置发布和禁用复制功能时提示分发服务器未正确安装.): 1.无法为本地服务器找到分发服务器或分发数据库.可能未安装分发服务器,也可能在分发服务器上未将本地服务器配置为发布服务器. 2.SQ ...
mysql的主从复制功能_Mysql的主从复制功能
本次演示Mysql的主从复制及主从切换功能. 本次演示基于条件:两台虚机服务器,都安装了mysql-5.6.26,并已启动. 演示环境: 操作系统版本:linux-6.6-x86_64 数据库版本:m ...
MySQL5.7.10多元复制功能搭建
MySQL5.7.10多元复制功能搭建 1.环境:centos6.5 [root@mysql-m1 mysql-5.7.10]# cat /etc/redhat-release CentOS rel ...
禁止页面复制功能 js禁止复制禁用页面右键菜单
<body οncοntextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: <script t ...
mysql 5.7配置多线程复制,MySQL5.7复制功能实战，基于事务的复制，多源复制和多线程复制配置...
这篇是幕课网-MySQL5.7复制功能实战视频教程的学习笔记.http://www.imooc.com/learn/589 第1章 MySQL复制基础 MySQL是异步复制采取针对特定用户的读写分离 ...
JS、Flash 实现复制功能（浏览器兼容）
JS.Flash 实现复制功能 (浏览器兼容) /** 此方法不兼容非IE外的浏览器...参考其它网站的实现方式,是用Flash来解决的此问题 */ function copyOperate(co ...
配置Memcache服务器并实现主从复制功能（repcached）
1.repcached介绍 repcached是日本人开发的实现memcached复制功能,它是一个单 master单 slave的方案,但它的 master/slave都是可读写的,而且可以相互同步 ...
现在不使用ZeroClipboard我们也能实现复制功能（转）
现在不使用ZeroClipboard我们也能实现首先,我们保证页面结构不变,但不在引入ZeroClipboard插件: 1 <input type="text" name= ...
mysql复制功能介绍
MYSQL复制功能,是构建基于数据库大规模性能的基础,大家也许知道,数据库扩展是非常困难的问题,这和WEB服务器是有很大的不同,如果我们的服务器出现大量的访问,压力增加性能下降的时候,我们只需要简单的 ...

HTML实现复制功能

1.CSS实现复制功能

2.使用clipboard.js进行复制

HTML实现复制功能相关推荐

最新文章

热门文章