[JAVASCRIPT]实现页面复制至电脑剪贴板
一、 方法
方1:
window.clipboarddata 可惜不支持chrome , chrome 下会提示找不到 clipboarddata 对象
方2: 采用国外大牛写的ZeroClipboar.js 插件, 原理是用flash 插件 遮盖响应复制的dom对象
<!-- 这里是HTML代码部分 -->
<textarea id="content" rows="10" cols="60">这里是需要复制的内容</textarea>
<input id="copy" type="button" value="复制">
</body>
<script src="<?php echo Yii::app()->baseUrl;?>/resources/libs/js/ZeroClipboard/ZeroClipboard.js"></script>
<script language="JavaScript">
var clip = new ZeroClipboard(document.getElementById('copy'));
clip.on({
"ready": function(){ alert("加载完成!"); },
"copy" : function(e){alert('copy');e.clipboardData.setData("text/plain", "这里是用于复制的纯文本数据");},
"aftercopy": function (e) {alert('copy complete');}
}); </script>
[JAVASCRIPT]实现页面复制至电脑剪贴板的更多相关文章
- javascript 将内容复制到剪贴板
javascript 将内容复制到剪贴板 CreateTime--2017年9月19日11:36:50 Author:Marydon js 操作剪贴板 1.设置剪贴板内容 UpdateTime-- ...
- JavaScript复制内容到剪贴板
移动端 需要复制内容到剪贴板时, clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容, 完成一键复制淘口令的功能. 注意使用clipborad.js时,i ...
- Javascript复制内容到剪贴板,解决navigator.clipboard Cannot read property 'writeText' of undefined
起因 最近帮同事实现了一个小功能--复制文本到剪贴板,主要参考了前端大神阮一峰的博客,根据 navigator.clipboard 返回的 Clipboard 对象的方法 writeText() 写文 ...
- ZeroClipboard – 轻松实现复制文本到剪贴板功能
ZeroClipboard 库提供了一种把文本复制到剪贴板的简单方法.Zero 表示该库是不可见的,用户界面则完全取决于你. 该库完全兼容 Flash Player 10.0.0 或以上版本,这就要求 ...
- Zclip点击复制内容到剪贴板兼容各浏览器
WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...
- 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
- Clipboard.js – 现代方式实现复制文本到剪贴板
复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...
- JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
- 利用JavaScript将页面截图生成图片传给后台的插件:html2canvas
利用JavaScript将页面截图生成图片传给后台的插件:html2canvas 一.总结 一句话总结: 10 <script type="text/javascript"& ...
随机推荐
- Spring学习(11)---JSR-250标准注解之 @Resource、@PostConstruct、@PreDestroy
1)@Resource(JSR-250标准注解,推荐使用它来代替Spring专有的@Autowired注解) Spring 不但支持自己定义的@Autowired注解,还支持几个由JSR-250规范定 ...
- java IO文件操作简单基础入门例子,IO流其实没那么难
IO是JAVASE中非常重要的一块,是面向对象的完美体现,深入学习IO,你将可以领略到很多面向对象的思想.今天整理了一份适合初学者学习的简单例子,让大家可以更深刻的理解IO流的具体操作. 1.文件拷贝 ...
- 微信小程序 - 自定义创建
自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么, no such file or directory(没有文件或目录) ...
- navicat 连接oracle数据库报错:ORA-28547:connection to server failed,probable Oracle Net admin error
链接:http://pan.baidu.com/s/1dEO9qJR 密码:ye2c 用Navicat连接Oracle数据库时出现如下错误 上网一查原来是oci.dll版本不对.因为Navicat是通 ...
- Oracle Job定时任务的使用详解
oracle中的job能为你做的就是在你规定的时间格式里执行存储过程,定时执行一个任务 .下面是一个小案例,定时每15分钟向一张表插入一条数据 一 1.创建一张测试表 -- Create table ...
- 自动安装lnmp
注:需先上传各安装包至服务器.#!/bin/bash #! auto install lnmp #! 安装依赖环境 yum -y groupinstall "X Software Devel ...
- Vue 项目实战系列 (三)
我们继续前两节的开发.本节教程实现的效果如下: 效果很简单,但是实现起来却要用到Vue的很多知识,下面我们将一步一步的实现这个效果. 首先这些城市的信息都是从后台的server里面获取的,所以我们需要 ...
- Transparent Application Failover 透明应用切换
官方文档地址 http://docs.oracle.com/cd/E11882_01/network.112/e41945/advcfg.htm#NETAG455 About Transparent ...
- 12.引入依赖项目的时候,如果找不到jar
原因是bin没有生成,先clean依赖包,再clean原工程包,就可以了
- C#调用TSC条码打印机打印条码
#region 调用TSC打印机打印条码 /// <summary> /// 调用TSC打印机打印条码 /// </summary> /// <param name=&q ...