js实现复制（zclip）

最新推荐文章于 2022-03-18 14:52:14 发布

番茄鲨鱼面

最新推荐文章于 2022-03-18 14:52:14 发布

阅读量5.3k

点赞数 1

分类专栏： Js&Jquery 文章标签： js 复制 zclip

本文链接：https://blog.csdn.net/xiakepan/article/details/50748882

版权

Js&Jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

js实现复制功能，借助zclip插件。

zclip原理

将页面的复制按钮（可以为任意一个控件）绑定zclip，会在该元素上生成一个透明的flash对象，点击该按钮实际是点击了flash对象，将页面上要复制的内容利用flash添加到剪切板中。
遇到的一个问题：本例中的复制按钮是任意移动的，但是flash元素的生成位置只和按钮绑定zclip时的位置一致。后期按钮移动，flash元素并不会跟随移动，这里没有找到好的调用接口。只能每次在移动复制按钮的时候把flash元素跟随着进行移动$("#zclip-ZeroClipboardMovie_1").css("left",$("#copy_input").offset().left);$("#zclip-ZeroClipboardMovie_1").css("top",$("#copy_input").offset().top);。

效果

当鼠标位于input上面的时候，在input后面显示复制按钮。
整个页面只有一个复制按钮绑定了zclip。

效果图

代码

引入jquery.js和jquery.zclip.min.js。
页面html：

<input type="text" id="mytext" style="display:none" value=""/>
<button id="copy_input" class="copy">复制</button>
<span id='msg' style="display:none">复制成功</span>
<input type="text" readonly='readonly' value="1" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="2" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="3" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="4" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="5" onmouseover ="showCopy(this)"/><br/>

复制按钮绑定zclip：

$('#copy_input').zclip({ 
    path: 'ZeroClipboard.swf', 
    copy: function(){//复制内容 
        return $('#mytext').val(); 
    }, 
    afterCopy: function(){//复制成功 
        $("#msg").insertAfter($('#copy_input'));
        $("#msg").show();
    } 
});

input添加鼠标进入事件

function showCopy(obj){
    $("#mytext").val($(obj).val());
    $("#msg").hide();
    $("#copy_input").insertAfter(obj);
    $("#copy_input").show();
    $("#zclip-ZeroClipboardMovie_1").css("left",$("#copy_input").offset().left);
    $("#zclip-ZeroClipboardMovie_1").css("top",$("#copy_input").offset().top);
}

源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通用..</title>
<script type="text/javascript" src="js/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.zclip.min.js"></script>
</head>
<body>
<input type="text" id="mytext" style="display:none" value=""/>
<button id="copy_input" class="copy">复制</button>
<span id='msg' style="display:none">复制成功</span>

<input type="text" readonly='readonly' value="1" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="2" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="3" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="4" onmouseover ="showCopy(this)"/><br/>
<input type="text" readonly='readonly' value="5" onmouseover ="showCopy(this)"/><br/>

<script type="text/javascript">
$(function(){
    $('#copy_input').zclip({ 
        path: 'ZeroClipboard.swf', 
        copy: function(){//复制内容 
            return $('#mytext').val(); 
        }, 
        afterCopy: function(){//复制成功 
            $("#msg").insertAfter($('#copy_input'));
            $("#msg").show();
        } 
    });
    $("#copy_input").hide();    
}); 
function showCopy(obj){
    $("#mytext").val($(obj).val());
    $("#msg").hide();
    $("#copy_input").insertAfter(obj);
    $("#copy_input").show();
    $("#zclip-ZeroClipboardMovie_1").css("left",$("#copy_input").offset().left);
    $("#zclip-ZeroClipboardMovie_1").css("top",$("#copy_input").offset().top);
}
</script> 
</body>
</html>

zclip下载

番茄鲨鱼面

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现复制（zclip）

js实现复制功能，借助zclip插件。zclip原理将页面的复制按钮（可以为任意一个控件）绑定zclip，会在该元素上生成一个透明的flash对象，点击该按钮实际是点击了flash对象，将页面上要复制的内容利用flash添加到剪切板中。遇到的一个问题：本例中的复制按钮是任意移动的，但是flash元素的生成位置只和按钮绑定zclip时的位置一致。后期按钮移动，flash元素并不会跟随移动，这里没有
复制链接

扫一扫