手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >zeroclipboard 单个复制按钮和多个复制按钮的实现方法
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
摘要:zeroclipboard是一个跨浏览器的库类它利用Flash进行复制,所以只要浏览器装有Flash就可以运行,而且比IE的document...

zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活。

zeroclipboard下载地址:http://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'>复制</a>

<input type="text" value="text" id="copy_txt1"/><a href="javascirpt:;" id="copy_btn1" data='1'>复制</a>

<input type="text" value="text" id="copy_txt2"/><a href="javascirpt:;" id="copy_btn2" data='2'>复制</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 单个复制按钮和多个复制按钮的实现方法】相关文章:

原生JS和JQuery动态添加、删除表格行的方法

快速判断某个值是否在select中的方法

jQuery判断一个元素是否可见的方法

javascript为按钮注册回车事件(设置默认按钮)的方法

javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

JQuery中上下文选择器实现方法

JavaScript点击按钮后弹出透明浮动层的方法

javascript实时显示当天日期的方法

在JavaScript中使用开平方根的sqrt()方法

js去字符串前后空格的实现方法

精品推荐
分类导航