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

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

最终效果：

网上一搜一大堆，单纯使用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>

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

赞 (0)

相关推荐

  • jquery.zclip轻量级复制失效问题

    工作原理 利用一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了 <script src="js/jquery/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/jquery-zclip/jquery.zclip.js"></script&g

  • jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方. HTML 首先需要在页面中载入jquery库和zclip插件,这两个文件已经打好包,欢迎点击下载. <script type="text/javascript" src="js/jquery.js"></script&

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

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

    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实现复制到粘贴板功能

    项目中突然需要使用复制功能,在网上搜索了下看到了ZeroClipboard插件,好用,但是也有局限.用法如下: 1.引用jquery.zclip.js.swf文件. demo地址:https://github.com/chaoli920029342/jquery_copy 2.初始化 <body> <input type="text" name="text" id="text" value="http://www.ba

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

    复制代码 代码如下: <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 zClip插件实现复制页面内容到剪贴板

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

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 最终效果: 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是用的透明flash遮挡"复制到剪贴板"按钮,所以当你点击"复制到剪贴板"的时候,点击的其实是flash,然后把你需要复制的内容传入到了flash,然后在通过flash的复制功能把传入的内容复制到了剪贴板. 加载JQuery库和zclip插件 <scri

  • 使用 JS 复制页面内容的三种方案

    使用 JS 复制页面内容的三种方案

    目录 引言 方式一:Async Clipboard API 方式二:Document.execCommand API 复制 DOM 元素内容 复制 input 元素内容 方法三:覆写 copy 事件 引言 现在有很多第三方插件能够实现 copy 功能,但如果让我们自己去做,我们知道如何去实现吗? 这篇文章介绍三种实现方案. 方式一:Async Clipboard API 使用 Async Clipboard API 这种方式使用起来最简单,但兼容性不太好,而且要求比较多. 示例代码: const

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

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

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

  • 神奇的代码 通杀各种网站-可随意修改复制页面内容

    页面上的所有内容都可以修改了,就像在word中编辑一样.那些不让拷贝的网站可以被这招通杀了.以后谁还会傻乎乎地分析页面代码,然后修改,保存,刷新,再拷贝呢? 代码内容: javascript:document.body.contentEditable='true'; document.designMode='on';

  • jquery星级插件、支持页面中多次使用

    jquery星级插件、支持页面中多次使用

    效果图如下: css所需背景图片: 二话不说,帖代码: html代码 复制代码 代码如下: <div class="xing"> <span style="float: left">总体评价:<font color="#CC3300" size="-1">*</font></span><div class="rating-wrap">

  • [Web]防止用户复制页面内容和另存页面的方法

    <body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"

  • jQuery简单实现点击文本框复制内容到剪贴板上的方法

    本文实例讲述了jQuery简单实现点击文本框复制内容到剪贴板上的方法.分享给大家供大家参考,具体如下: //点击文本框复制其内容到剪贴板上方法 function copyToClipboard(txt) { if (window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("Text", txt); alert("已经成功复制到剪帖板上!"); } e

  • 分享十五个最佳jQuery 幻灯插件和教程

    分享十五个最佳jQuery 幻灯插件和教程

    幻灯(通常也被称为"内容滑动".内容切换效果.焦点图等)是在网站或博客的较小区域展示大量内容的很好的方法.动态的自动滑动内容在很多网站上都是很流行的.你是否也对在自己的网站上实现类似的效果感兴趣?那就看一下本文列出的jQuery插件吧!1. jFlow 官方网站 | 演示 一个漂亮而整洁的图片幻灯,被nettut推荐,如果你想自己做一个图片幻灯效果,就去看看吧. 2. 使用jQuery UI实现推荐内容的幻灯展示 官方网站 这是一个教你如何"使用一种很有冲击力的方法展示你的网

随机推荐