[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"& ...
随机推荐
- python+selenium遇到鼠标悬停不成功可以使用js进行操作
问题:在定位这种悬停后出现下拉操作的时候,尝试了使用move_to_element的方法 # ele_logout = br.find_element_by_xpath('/html/body/div ...
- mysql+keepalived 双主热备高可用
理论介绍:我们通常说的双机热备是指两台机器都在运行,但并不是两台机器都同时在提供服务.当提供服务的一台出现故障的时候,另外一台会马上自动接管并且提供服务,而且切换的时间非常短.MySQL双主复制,即互 ...
- java 字符串全排列 和 去重
用递归进行排序 , 用TreeSet 去重. public class test { public static void main(String []args){ String str = &quo ...
- Microsoft Excel 自动取数据库数据
1.下载安装mysql-connector-odbc-5.1.5-win32.msi 2.打开控制面板.搜索数据 3.点击添加→MySQL ODBC 5.1 Driver→完成 4.填写名称.IP地址 ...
- [leetcode-474-Ones and Zeroes]
In the computer world, use restricted resource you have to generate maximum benefit is what we alway ...
- SQL联表查询
数据库中最最常用的语法----select.简单的select语法很直白: select column from table where expression: 从((from)存储数据的地方(tab ...
- .NetCore+Jexus代理+Redis模拟秒杀商品活动
开篇叙 本篇将和大家分享一下秒杀商品活动架构,采用的架构方案正如标题名称.NetCore+Jexus代理+Redis,由于精力有限所以这里只设计到商品添加,抢购,订单查询,处理队列抢购订单的功能:有不 ...
- webpackage 2.x 使用
webpackage 2.x 使用 安装---(在项目目录下) //1.初始化npm的配置(添加package.json) npm init //2.安装 webpackage npm install ...
- Spring MVC 项目搭建 -5- spring security 使用数据库进行验证
Spring MVC 项目搭建 -5- spring security 使用数据库进行验证 1.创建数据表格(这里使用的是mysql) CREATE TABLE security_role ( id ...
- css3学习系列之移动(一)
transform功能 放缩 使用sacle方法实现文字或图像的放缩处理,在参数中指定缩放倍率,比如sacle(0.5)表示缩小50%,例子如下: <!DOCTYPE html> < ...