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 相关文章推荐
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
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
无线电广播的开始
2002/01/30 无线电
php mysql数据库操作分页类
2008/06/04 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
在Python中使用正则表达式的方法
2015/08/13 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
Form表单及django的form表单的补充
2019/07/25 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
社区中秋节活动方案
2014/01/29 职场文书
财务管理专业自荐书
2014/09/02 职场文书
意向协议书
2015/01/27 职场文书
公司周年庆寄语
2019/06/21 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电