jQuery实现复制到粘贴板功能


Posted in Javascript onFebruary 11, 2017

项目中突然需要使用复制功能,在网上搜索了下看到了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.baidu.com" />
<a href="javascript:void(0)" rel="external nofollow" id="dynamic">复制</a>
<script type="text/javascript">
$(document).ready(function(){
 $("#dynamic").zclip({
  path:'ZeroClipboard.swf',
  copy:$('#text').val(),
  beforeCopy:function(){
   //some code
  },
  afterCopy:function(){
   alert($("#text").val());
  }
 });
 //beforeCopy afterCopy 是可选项
});
</script>
</body>

注:

1、需在服务器上运行 localhost

2、js+swf实现,文件需要同时引入。 ZeroClipboard提供一个透明的flash,用于和剪切版交互,当点击页面上的“复制”按钮时,将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板。 需保证该flash被正确加载即可。

3、可兼容各大浏览器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery遍历Table应用示例
Apr 09 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
js仿微信抢红包功能
Sep 25 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
JS 实现分页打印功能
May 16 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
js实现PC端和移动端刮卡效果
Mar 27 #Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 #Javascript
BootStrap select2 动态改变值的方法
Feb 10 #Javascript
angularjs实现的前端分页控件示例
Feb 10 #Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 #Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 #Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 #Javascript
You might like
php反弹shell实现代码
2009/04/22 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
python3.7调试的实例方法
2020/07/21 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
副总经理工作职责
2013/11/28 职场文书
总经理职责
2013/12/22 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
社区先进事迹材料
2014/05/19 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
上下班时间调整通知
2015/04/23 职场文书
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js