步骤:
1、引入js文件,记得先引入jquery
<script type="text/javascript" src="ZeroClipboard.js"></script>
2、然后配置swf文件的路径
ZeroClipboard.config( { swfPath: "http://YOURSERVER/path/ZeroClipboard.swf" } );
3、创建客户端
var client = new ZeroClipboard($(".copy-button"));
4、使用copy功能
client.on( "copy", function (event) {
var clipboard = event.clipboardData;
clipboard.setData( "text/plain", "Copy me!" );
alert('copy over!);
// clipboard.setData( "text/html", "<b>Copy me!</b>" );
// clipboard.setData( "application/rtf", "{\\rtf1\\ansi\n{\\b Copy me!}}" );
});
具体使用:
<html>
<head>
<style type=
"text/css"
>
.clip_button {
text-align: center;
border: 1px solid black;
background-color:
#ccc;
margin: 10px;
padding: 10px;
}
.clip_button.zeroclipboard-is-hover { background-color:
#eee; }
.clip_button.zeroclipboard-is-active { background-color:
#aaa; }
</style>
</head>
<body>
<script type=
"text/javascript"
src=
"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
></script>
<script type=
"text/javascript"
src=
"ZeroClipboard.js"
></script>
<div
class
=
"clip_button"
>Copy To Clipboard</div>
<div
class
=
"clip_button"
>Copy This Too!</div>
<script type=
"text/javascript"
>
var
client =
new
ZeroClipboard( $(
'.clip_button'
) );
client.on(
'ready'
,
function
(event) {
// console.log( 'movie is loaded' );
client.on(
'copy'
,
function
(event) {
event.clipboardData.setData(
'text/plain'
, event.target.innerHTML);
} );
client.on(
'aftercopy'
,
function
(event) {
console.log(
'Copied text to clipboard: '
+ event.data[
'text/plain'
]);
} );
} );
client.on(
'error'
,
function
(event) {
// console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
ZeroClipboard.destroy();
} );
</script>
</body></html>
相关推荐
Zero Clipboard一个比较成熟的跨浏览器兼容的“复制到剪切板”功能库,需要放在项目里使用
网页中偶尔需要复制链接到粘贴板里,然后粘贴分享。FLASH粘贴板,兼容所有浏览器,但必须得安装了FLASH插件哦。例子中有所有的插件 直接复制就行了。本人已经试过。
js文件在dist中。zeroclipboard插件:借助flash拷贝数据到剪切板。clipboard插件:无需借助flash和framework框架、轻量级。
ZeroClipboard 元素内容复制-兼容各浏览器,简单易用,拿去直接即可使用,节省大家时间。 注:直接使用静态页面,不会有任何效果,需要放置在容器中,如:tomcat
因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板。 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.setData,只能支持IE和火狐。...
兼容多浏览器的JavaScript脚本,以JS+FLASH的形式实现复制内容到剪贴板
zeroclipboard
虽然网上实现Ctrl + C的JS代码已经有很多了,但我还是向大家推荐一个比较好的插件zeroclipboard,兼容所有浏览器
zeroclipboard组件,利用flash解决了不同浏览器下,把内容复制到剪切板的兼容问题。
项目中需要实现一个点击按钮复制链接的功能,网上看到的几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,能不能通过JS来实现复制剪切呢,今天分享一个兼容IE7浏览器复制的插件给...
js复制到剪切板核心js。可以在各种浏览器使用。var client = new ZeroClipboard( document.getElementById("copy") ); client.on( "ready", function( readyEvent ) { client.on( "beforecopy", function() {...
解决浏览器兼容问题,击按钮把文本框的内容复制到剪贴板的功能 详细描述可以链接进入我的博客: http://blog.csdn.net/xiaowu108/article/details/40461225
两天前听了一个H5的分享,...今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能需要实现复制文本到剪贴板,相信这个功能很常用,但是对于不常写JS代码的我来说是一个比较大的挑战,回
复制页面内容到剪贴板兼容各浏览器 ##引用方式 require('jquery-zclip'); ##使用方法 $('#copy_input').zclip({ path: __uri('../../components/jquery-zclip/ZeroClipboard.swf'), copy: function(){//复制内容...