JQuery zClip插件实现复制页面内容到剪贴板_jquery

相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要。

最终效果:

网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的。去看了几个常用的网站,都是用的透明flash遮挡“复制到剪贴板”按钮,所以当你点击“复制到剪贴板”的时候,点击的其实是flash,然后把你需要复制的内容传入到了flash,然后在通过flash的复制功能把传入的内容复制到了剪贴板。
加载JQuery库和zclip插件

<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script src="js/jquery.zclip.min.js"></script>

下面是一个小demo,主要是复制文本框中的链接到剪贴板。
HTML

<input type="text" value="www.jb51.net" id="link">
<span id="copyBtn">复制链接</span> 

然后加入脚本

<script>
    $('#copyBtn').zclip({
      path: "ZeroClipboard.swf",
      copy: function(){
        return $('#link').val();
       }
    });
</script>

然后就可以直接打开网页测试了,这只是一个简单的小应用,希望大家可以迅速掌握。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, zclip实例
, zclip使用
zclip
jquery复制剪贴板插件、jquery zclip复制img、jquery复制到剪贴板、jquery剪贴板插件、纯jquery复制到剪贴板,以便于您获取更多的相关知识。

时间: 2024-10-23 02:41:21

JQuery zClip插件实现复制页面内容到剪贴板_jquery的相关文章

jQuery zclip插件实现跨浏览器复制功能_jquery

jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe Flash Player. 1.jQuery-zclip用法 //引入jQuery-zclip相关js及swf文件 <script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js&q

jquery使用jquery.zclip插件复制对象的实例教程_jquery

复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.zclip.min.js"></script> 复制代码 代码如下: $(function(){    $('#copy_input').zclip(

jquery lazyload插件代码实现页面图片延迟加载

借助 jquery lazyload插件可以轻松实现延迟加载,调用方式如下: 引入jquery和jquery lazyload插件:  代码如下 复制代码 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></s

jQuery实现Select左右复制移动内容_jquery

引入的文件为<script type="text/javascript" src="jquery-1.10.2.js"></script> 双击也可以移动 [1].[代码] <script type="text/javascript"> $(function(){ //移到右边 $("#add").click(function(){ //获取选中的选项,删除并追加给对方 $("#s

jQuery validate插件submitHandler提交导致死循环解决方法_jquery

本文实例讲述了jQuery validate插件submitHandler提交导致死循环解决方法.分享给大家供大家参考,具体如下: dom对像的提交form.submit();和jquery对像的提交$('').submit();功能上是没有什么区别的.但是如果用了jquery validate插件,提交时这二个就区别大了.$('').submit();提交时,jquery validate会进行验证,submitHandler里面如果写了$('').submit();会导致死循环,而form.

jQuery Validation插件remote验证方式的Bug解决_jquery

不过奇怪的是,最近用下来感觉有些古怪,因为好像有些死板,已有功能的应变能力还不强,甚至还有个奇怪的Bug.任何项目有Bug其实也正常,但这个Bug其实是一个文档上已经记载了,却没有实现的功能,这就有些说不过去了.这个问题便出在remote验证方式上,还好修改起来非常容易,在此记录一下,也方便以后的参考. 在表单验证时,有时候会需要发一个AJAX请求去服务器上进行判断,例如在用户注册时检查用户名是否存在.jQuery Validation插件提供了一种remote方式来实现这一点.例如我可以这样验

jQuery实现自动滚动到页面顶端的方法_jquery

本文实例讲述了jQuery实现自动滚动到页面顶端的方法.分享给大家供大家参考.具体实现方法如下: $(".scroll").click(function(event) { //prevent the default action for the click event event.preventDefault(); //get the full url - like mysitecom/index.htm#home var full_url = this.href; //split t

jquery实现触发时更新下拉列表内容的方法_jquery

本文实例讲述了jquery实现触发时更新下拉列表内容的方法.分享给大家供大家参考,具体如下: 服务端假如有个请求地址用来返回所需数据 url:/hello 返回类似: 复制代码 代码如下: [{"西瓜":10},{"苹果":12},{"香蕉":13},{"芒果":14}] 这样的json数据 html: 按钮:<input type="button" id="btn" value=

JQuery选择器绑定事件及修改内容的方法_jquery

本文实例讲述了JQuery选择器绑定事件及修改内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello World jQuery!</title> <script type="text/javascript" src="jquery-1.3.2.min.js&