博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery-zclip实现复制内容到剪切板
阅读量:6694 次
发布时间:2019-06-25

本文共 1432 字,大约阅读时间需要 4 分钟。

jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe Flash Player。

本来以为,复制粘贴很简单,没想到还需要插件。

找了很多,这个jquery-zclip的插件算是不错的。

这里需要注意的就是,这个插件,必须在服务器的环境中才能正常显示效果。

使用方法,

1.引入文件

2.引入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;}

3.给需要复制的元素添加事件,这里的/js/zclip/ZeroClipboard.swf,一定要正确的引入

$("#phone_number").zclip({                        path: "/js/zclip/ZeroClipboard.swf",                        copy: function(){                        return $(this).val();                        },                        beforeCopy:function(){
/* 按住鼠标时的操作 */ $(this).css("color","orange"); }, afterCopy:function(){
/* 复制成功后的操作 */ var $copysuc = $("
复制成功
"); $("body").find(".copy-tips").remove().end().append($copysuc); $(".copy-tips").fadeOut(3000); } });

 

最终效果

本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/4961538.html如需转载请自行联系原作者

你可能感兴趣的文章
AngularJS 和 Polymer 的角色,是否有竞争关系
查看>>
Git@OSC 上周更新汇总,优化搜索精确度
查看>>
基于 GPU 的 OLAP 系统 MapD 开源其核心数据库
查看>>
编程世界经典秘籍:程序员的提问之道
查看>>
TMPFS详解
查看>>
8.3控制质量(后续不断完善)
查看>>
《UNIX编程环境》——5.5 overwrite:改写文件
查看>>
《SolidWorks 2016中文版完全自学手册)》——1.5 SOLIDWORKS术语
查看>>
微软这是要彻底放弃 Windows Phone 吗?
查看>>
《Unity着色器和屏幕特效》——1.3 加载飞船维修场景并在场景中漫游
查看>>
《电子元器件的可靠性》——2.7节正态分布或高斯分布
查看>>
《STM32库开发实战指南:基于STM32F103(第2版)》——3.2节硬件连接
查看>>
《黑客秘笈——渗透测试实用指南》—第1章1.1节搭建渗透测试主机
查看>>
《C专家编程》一1.5 今日之ANSI C
查看>>
《Servlet、JSP和Spring MVC初学指南》——第2章 会话管理 2.1URL重写
查看>>
Docker 之 构建镜像
查看>>
《微信小程序开发入门精要》——第2章,第2.5节水平排列对齐方式
查看>>
《异构信息网络挖掘: 原理和方法》—— 第2章 基于排名的聚类 2.1 概述
查看>>
[案例]网易云音乐的个性化推荐
查看>>
《C++编程惯用法——高级程序员常用方法和技巧》——1.1 有关电话号码的抽象模型...
查看>>