jquery的粘贴插件：

如下是代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>jquery-zclip</title>

<style type="text/css">

/* 复制提示 */

.copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;margin:0 0 -20px -80px;background-color:rgba(0, 0, 0, 0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);padding:6px;}

.copy-tips-wrap{padding:10px 20px;text-align:center;border:1px solid #F4D9A6;background-color:#FFFDEE;font-size:14px;}

</style>

</head>

<body>

<input id="copy_text" type="text" />

<input id="copy_button" type="button" value="点我复制" />

</body>

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

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

<script type="text/javascript">

    $(document).ready(function(){

        $("#copy_button").zclip({

            path: "ZeroClipboard.swf",

            copy: function(){

            return $("#copy_text").val();

            },

            afterCopy:function(){/* 复制成功后的操作 */

           	alert("sucess")

                var $code=$("#copy_text").val();

                var fade_node="<div class='copy-tips'><div class='copy-tips-wrap'>"+'code: ' + $code + ' has been copied'+"</div></div>";

                var $copysuc = $(fade_node);

                $("body").find(".copy-tips").remove().end().append($copysuc);

                $(".copy-tips").fadeOut(2500);

            }

        });

    });

</script>

</html>

　　

其中需要注意的是jquery，html，ZeroClipboard.swf需要在同一路径下面！！0.0

1、jQuery-zclip插件官网
ZeroClipboard.swf下载地址

配置说明
path:swf的路径(复制主要是用flash解决不同浏览器的复制)
copy:待复制的内容, 可以是静态内容, 也可以 return 动态内容
beforeCopy:复制之前要做的function;
afterCopy:复制之后要做的function;

提供了3个方法
show:$(selected).zclip('show');//复制功能有效
hide:$(selected).zclip('hide');//复制功能无效
remove:$(selected).zclip('remove');//完全移除复制功能

jquery.zclip.js粘贴功能的更多相关文章

  1. 解决jquery.zclip.js插件无法复制的问题

    网页中需要用到点击复制,在使用webpack加载jquery以及jquery.zclip.js后,出现了以下情况: jquery顺利加载 zclip插件顺利加载 ZeroClipboard.swf顺利 ...

  2. jquery zclip 复制黏贴功能不能实现

    按照http://www.steamdev.com/zclip/我实现一个简单的zclip test 以下是我的测试code: <!DOCTYPE html> <html> & ...

  3. jquery.zclip.js复制到剪切板

    参考http://www.cnblogs.com/PeunZhang/p/3324727.html 需要引用jquery.zclip $("#id").zclip({ path: ...

  4. jquery.zclip.js 不起作用

    最近有用到复制的这个功能,选用jQuery的插件,正常使用的时候,没有任何问题: $('#copy_mobile_watch_address').zclip({ path: '/dist/plugin ...

  5. JQuery复制内容到剪切板-jquery.zclip.js的使用，在公司项目中

    公司项目中有一个复制粘贴的内容,也试图找其他插件但都是浏览器兼容问题,在网上找这个插件挺不错的,FLASH,兼容各个浏览器,测试时要在服务器环境下,点击参考,参考这个网址,或者搜下标题这个插件,性能不 ...

  6. jquery.zclip—复制剪贴板（兼容各大浏览器）

    开始前说两句 WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内 ...

  7. jQuery.template.js 简单使用

    之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...

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

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

  9. 解决jquery zclip 插件点击无效的问题

    使用jquery zclip 用于页面复制文本内容. 首先引入js <script type="text/javascript" src="../js/jquery ...

随机推荐

  1. I/O 模型

    5种I/O模型的基本区别: 阻塞式I/O 非阻塞式I/O I/O复用 信号异步模型 异步I/O 1. 阻塞 I/O 最流行的I/O模型是阻塞I/O模型,缺省情形下,所有套接口都是阻塞的.我们以数据报套 ...

  2. Confluence 6 启用 HTTP 压缩

    在屏幕的右上角单击 控制台按钮 ,然后选择 基本配置(General Configuration) 链接. 在左侧的面板中选择 通用配置(General Configuration). 启用 HTTP ...

  3. Confluence 6 附件存储提取文本文件

    当基于文本的文件上传到 Confluence(例如,Word,PowerPoint 等),这些文件中的文本是可以提取并且添加到索引中的,用户可以通过索引来搜索这些文件中的文本内容,不仅仅是搜索文件名. ...

  4. 如何编辑PDF文件，怎么使用PDF裁剪页面工具

    在编辑PDF文件的时候,往往会有很多的小技巧可以使用,在编辑PDF文件的时候,怎么对文件的页面进行裁剪呢,不会的话,看看下面的文章吧,小编已经为大家整理好了哦. 1.打开运行PDF编辑器,在编辑器中打 ...

  5. html5 drag 文件拖拽浅淡

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue 在.vue文件里监听路由

    监听路由  watch   $route vue项目中的App.vue 文件 <template> <div id="app"> <!--includ ...

  7. selenium 操作复选框

    场景 从上一节的例子中可以看出,webdriver可以很方便的使用findElement方法来定位某个特定的对象,不过有时候我们却需要定位一组对象, 这时候就需要使用findElements方法. 定 ...

  8. python unittest框架装饰器

    要说单元测试和UI自动化之间的是什么样的一个关系,说说我个人的一些心得体会吧,我并没有太多的这方面经验,由于工作本身就用的少,还有就是功能测试点点对于我这种比较懒惰的人来说,比单元测试复杂...思考单 ...

  9. 阿里云人脸识别测试接口出错 返回Body：{ "errno": 3002, "err_msg": "ILLEGAL_PARAMETERS", "request_id": "672cba83-cf93-4ef4-9ce5-d87e51601632" }

    错误信息如下 返回Body:{ "errno": 3002, "err_msg": "ILLEGAL_PARAMETERS", ...... ...

  10. GnuPGP介绍

    PGP(Pretty Good Privacy的首字母):PGP公司的加密.签名工具套件,使用了商业版本的IDEA算法,并集成了有商业版权的PGPdisk工具. GnuPG(GNU Privacy G ...