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. Multisim 经典学习教程Step by Step

    Tracy Shields编著 ftp://ftp.ni.com/pub/branches/china/Practical%20teaching%20Ideas%20for%20Multisim%20 ...

  2. POJ 2115

    ax=b (mod n) 该方程有解的充要条件为 gcd(a,n) | b ,即 b% gcd(a,n)==0 令d=gcd(a,n) 有该方程的 最小整数解为 x = e (mod n/d) 其中e ...

  3. [转]ASCII码表及扩展ASCII码表,方便查阅

    ASCII码表可以看成由三部分组成: 第一部分:由00H到1FH共32个,一般用来通讯或作为控制之用.有些可以显示在屏幕上,有些则不能显示,但能看到其效果(如换行.退格).如下表: 第二部分:是由20 ...

  4. iOS9 新功能:Support Universal Links,iOS10 openUrl新函数

    先看官方文档:https://developer.apple.com/library/ios/documentation/General/Conceptual/AppSearch/UniversalL ...

  5. 【MySql】删除操作

    删除表内数据,用 delete.格式为: delete from 表名 where 删除条件; 实例:删除学生表内姓名为张三的记录. delete from student where T_name ...

  6. LeetCode(110):平衡二叉树

    Easy! 题目描述: 给定一个二叉树,判断它是否是高度平衡的二叉树. 本题中,一棵高度平衡二叉树定义为: 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1. 示例 1: 给定二叉树 [3, ...

  7. java操作office和pdf文件java读取word,excel和pdf文档内容

    在平常应用程序中,对office和pdf文档进行读取数据是比较常见的功能,尤其在很多web应用程序中.所以今天我们就简单来看一下Java对word.excel.pdf文件的读取.本篇博客只是讲解简单应 ...

  8. Python数据类型之字符串

    一:概述 Python中的字符串的一些概念 可以看作是字符的集合,在数据类型里没有单个字符的数据类型,可以用单个字符表示的一个字符串数据类型 字符串是一种不可变的序列类型,单个字符从左到右按照顺序排列 ...

  9. Linux SSH & SCP命令

    SSH SSH为建立在应用层和传输层基础上的安全协议 sshd服务使用SSH协议进行远程控制,或在计算机之间传送文件.而实现此功能的telnet(远程桌面) 是不安全的,使用明文传送密码 ssh ss ...

  10. IntelliJ IDEA 中自动生成 serialVersionUID 的方法

    as, idea plugin中搜如下关键字,并安装该插件: GenerateSerialVersionUID 如上图所示,创建一个类并实现Serializable接口,然后按alt+Enter键,即 ...