zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014-06-14 02:38
567 查看
zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活。
zeroclipboard下载地址:https://www.jb51.net/jiaoben/24961.html
<input type="text" value="text" id="copy_txt"/><a href="javascirpt:;" id="copy_btn">复制</a>
<script language="JavaScript">
ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' ); //和html不在同一目录需设置setMoviePath
ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
var clip = new ZeroClipboard.Client(); //创建新的Zero Clipboard对象
clip.setText( '' ); // will be set later on mouseDown //清空剪贴板
clip.setHandCursor( true ); //设置鼠标移到复制框时的形状
clip.setCSSEffects( true ); //启用css
clip.addEventListener( 'complete', function(client, text) { //复制完成后的监听事件
alert("aa")
clip.hide(); // 复制一次后,hide()使复制按钮失效,防止重复计算使用次数
} );
clip.addEventListener( 'mouseDown', function(client) {
clip.setText( document.getElementById('copy_txt').value );
} );
clip.glue( 'copy_btn' );
</script>
<input type="text" value="text" id="copy_txt0"/><a href="javascirpt:;" id="copy_btn0" data='0' class="copyBtn">复制</a>
<input type="text" value="text" id="copy_txt1"/><a href="javascirpt:;" id="copy_btn1" data='1' class="copyBtn">复制</a>
<input type="text" value="text" id="copy_txt2"/><a href="javascirpt:;" id="copy_btn2" data='2' class="copyBtn">复制</a>
<script language="JavaScript">
$(".copyBtn").each(function(i){
var id = $(this).attr('data');
var clip=null;
clip = new ZeroClipboard.Client();
ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' ); //和html不在同一目录需设置setMoviePath
ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
clip.setHandCursor( true );
clip.setText( $("#copy_txt"+id).val() );
clip.addEventListener('complete', function (client, text) {
alert( "恭喜复制成功" );
});
clip.glue( 'copy_btn'+id);
});
</script>
zeroclipboard下载地址:https://www.jb51.net/jiaoben/24961.html
zeroclipboard实现多浏览器复制到粘贴板功能(单个复制按钮和多个复制按钮) 为了更好的用户体验,现在很多网站中文本框的内容只需要点击复制按钮这样就能把内容复制到粘贴板了;
出于兼容性的考虑,基本上都是通过zeroclipboard来实现.首先要下载zeroclipboard,解压后把ZeroClipboard.js和ZeroClipboard.swf、ZeroClipboard10.swf(“为了flash10”)放到项目中,可以通过ZeroClipboard.setMoviePath( '/ZeroClipboard.swf' )方法来加载swf;
下面是整理的代码(也是通过 网上查找整理的)
(单个复制按钮):
html:
复制代码 代码如下:<input type="text" value="text" id="copy_txt"/><a href="javascirpt:;" id="copy_btn">复制</a>
<script language="JavaScript">
ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' ); //和html不在同一目录需设置setMoviePath
ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
var clip = new ZeroClipboard.Client(); //创建新的Zero Clipboard对象
clip.setText( '' ); // will be set later on mouseDown //清空剪贴板
clip.setHandCursor( true ); //设置鼠标移到复制框时的形状
clip.setCSSEffects( true ); //启用css
clip.addEventListener( 'complete', function(client, text) { //复制完成后的监听事件
alert("aa")
clip.hide(); // 复制一次后,hide()使复制按钮失效,防止重复计算使用次数
} );
clip.addEventListener( 'mouseDown', function(client) {
clip.setText( document.getElementById('copy_txt').value );
} );
clip.glue( 'copy_btn' );
</script>
多个复制按钮:
复制代码 代码如下:<input type="text" value="text" id="copy_txt0"/><a href="javascirpt:;" id="copy_btn0" data='0' class="copyBtn">复制</a>
<input type="text" value="text" id="copy_txt1"/><a href="javascirpt:;" id="copy_btn1" data='1' class="copyBtn">复制</a>
<input type="text" value="text" id="copy_txt2"/><a href="javascirpt:;" id="copy_btn2" data='2' class="copyBtn">复制</a>
<script language="JavaScript">
$(".copyBtn").each(function(i){
var id = $(this).attr('data');
var clip=null;
clip = new ZeroClipboard.Client();
ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' ); //和html不在同一目录需设置setMoviePath
ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );
clip.setHandCursor( true );
clip.setText( $("#copy_txt"+id).val() );
clip.addEventListener('complete', function (client, text) {
alert( "恭喜复制成功" );
});
clip.glue( 'copy_btn'+id);
});
</script>
注意: clip.setText( $("#copy_txt"+id).val() );如果是获取div中的内容, 一般用clip.setText( $("#copy_txt"+id).text() );或clip.setText( $("#copy_txt"+id).html() );
您可能感兴趣的文章:
相关文章推荐
- zeroclipboard 单个复制按钮和多个复制按钮的实现方法
- zeroclipboard 单个复制按钮和多个复制按钮的实现方法
- Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
- ZeroClipboard插件动态绑定ID,实现多个按钮都能跨浏览器复制粘贴
- 实现点击按钮复制文本框中文本到剪切板中的方法
- Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
- 关于Coolite从Excel中粘贴记录复制到WEB中实现方法
- 不能用new List()的方法实现引用类型List的复制
- 点击按钮后实现复制,复制TextBox里面的内容
- JS实现点击按钮自动复制(只支持IE浏览器)
- (转)ASP.NET MVC中实现多个按钮提交的几种方法
- 禁用IE的后退按钮|显示网页已过期|几种语言的实现方法|c#|javascript|html
- 利用CBitmapButton类实现位图按钮的两种方法
- 通过js脚本复制网页上的一个表格的不错实现方法
- 自定义reportviewer打印设置按钮的另类实现方法
- 实现网页中按钮刷新的N种方法
- 禁用IE的后退按钮|显示网页已过期|几种语言的实现方法|c#|javascript|html
- APUE2作者提供的源码编译方法及单个源码编译的实现(转载)
- 利用CBitmapButton类实现位图按钮的两种方法
- Button按钮多行显示的实现方法