最近工作中需要在前端页面中使用代码完成剪贴板的读写，网上搜索了下相应的资料，记录下...

这个功能有两个办法一个是js方式，一个是使用flash

一、JS方法

1、复制

首先复制的过程分为两步曲，无论是使用手工还是代码，先来看看手工的

a、使用光标选中内容　　　　b、通过ctrl + c 进行复制

其实在代码端也是一样，以此用这个步骤来，html代码如下

 <html>

     <head>

         <title></title>

     </head>

     <body>

         <input id="content" value="我是内容君" />

     </body>

 </html>

上面ID为content的input，其中的内容就是我们要复制的

第一步：选中它，代码如下

 var range = document.createRange();

 range.selectNode(document.getElementById("content"));

 window.getSelection().addRange(range);

然后就是这样的效果

第二步：执行ctrl + c的操作

 document.execCommand("copy");

代码就一行，返回值为true 表示成功

2、读取

这个也就是ctrl + v的功能了，只有一行代码

 window.getSelection().toString();

效果如下

3、校验兼容性

由于安全相关考虑，很多浏览器都不支持在浏览器中操作剪贴板，所以为了兼容性，可以直接在浏览器中使用如下代码

 document.execCommand("copy");

如果返回true，则表示浏览器支持，如果返回false则表示不支持

二、使用flash插件

flash这边权限比较大，可以完成复制粘贴的过程，但是也有很大的局限性，比如移动端就不支持flash，然后就是IE和火狐也不支持。

这边的demo使用的是zeroclipboard，git上的网页是https://github.com/zeroclipboard/zeroclipboard，官方demo和效果图如下

 <html>

   <body>

     <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>

     <script src="ZeroClipboard.js"></script>

     <script src="main.js"></script>

   </body>

 </html>
var client = new ZeroClipboard( document.getElementById("copy-button") );

client.on( "ready", function( readyEvent ) {

  // alert( "ZeroClipboard SWF is ready!" );

  client.on( "aftercopy", function( event ) {

    // `this` === `client`

    // `event.target` === the element that was clicked

    event.target.style.display = "none";

    alert("Copied text to clipboard: " + event.data["text/plain"] );

  } );

} );

差不多就是以上效果，但是我觉得还是不咋地，毕竟前端只是在浏览器中写的代码，并不是一个完全的C/S程序.....总之在浏览器中进行剪切板上的操作没有十全十美的。。。。。

搞定！！！！！！

js 复制粘贴功能记录的更多相关文章

  1. js实现复制粘贴功能

    在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...

  2. Android EditText 取消复制粘贴功能,取消横向全屏编辑功能(一)

    在做一些安全性的软件时候常常要考虑取消 EditText 上的复制粘贴功能以确保安全性.下面就记录了这个方法: 首先在API-11以下的版本很简单,只需要在Xml布局文件或者用代码把长按属性设置成fa ...

  3. iOS开发之--复制粘贴功能

    复制粘贴功能,代码如下: 1.复制功能 UIPasteboard *pasteboard = [UIPasteboard generalPasteboard]; pasteboard.string = ...

  4. .NET 实现复制粘贴功能

    老是把自己当作珍珠,就时时有怕被埋没的痛苦.把自己当作泥土吧,让众人把你踩成一条道路. -----<泥土>鲁藜 .NET如何实现复制粘贴功能,具体代码如下: aspx文件: <div ...

  5. 在CMD命令行和PowerShell中实现复制粘贴功能

    在CMD命令行和PowerShell中实现复制粘贴功能         常常使用命令行或者PowerShell的朋友肯定会遇到这样的情况:粘贴文本非常easy,右键--选择粘贴就可以,可是想要复制命令 ...

  6. 仿复制粘贴功能，长按弹出tips的实现

    方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列 ...

  7. Java io流完成复制粘贴功能

    JAVA 中io字节输入输出流 完成复制粘贴功能: public static void main(String[] args) throws Exception{        // 创建输入流要读 ...

  8. 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓

    <!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...

  9. Vbox中unbuntu15.10与win10共享文件 及开启复制粘贴功能

    学习linux,一直使用的是VMware虚拟机,虽然功能很强大,但总感觉页面切换很麻烦.所以转入Vbox的使用,下面介绍下unbuntu15.10与win10共享文件. 一 共享文件夹 步骤1:启动u ...

随机推荐

  1. C语言高级宏技巧

    特殊符号#.## (1)# When you put a # before an argument in a preprocessor  macro, the preprocessor turns t ...

  2. beego——构造查询

    QueryBuilder提供了一个简单.流畅的SQL查询构造器.在不影响代码可读性的前提下用来快速的建立SQL语句. QueryBuilder在功能上与ORM重合,但是个由利弊,ORM更适合用于简单的 ...

  3. git命令与协同开发

    一 git命令 1.简单命令 git init # 初始化 (建立git 版本相关文件关系都放这里) git config --global user.email "you@example. ...

  4. Java集合（3）：Vector && Stack

    一.Vector介绍 Vector可以实现可增长的动态对象数组.与数组一样,它包含可以使用整数索引进行访问的组件.不过,Vector的大小是可以增加或者减小的,以便适应创建Vector后进行添加或者删 ...

  5. hdu1711 Number Sequence kmp应用

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=1711 题目: Problem Description Given two sequences of n ...

  6. ZOJ 3261 Connections in Galaxy War (逆向+带权并查集)

    题意:有N个星球,每个星球有自己的武力值.星球之间有M条无向边,连通的两个点可以相互呼叫支援,前提是对方的武力值要大于自己.当武力值最大的伙伴有多个时,选择编号最小的.有Q次操作,destroy为切断 ...

  7. initrd.img的压缩(制作)及解压的过程

    一.启动镜像initrd.img 文件类RedHat 系统从vmlinuz 核心引导后,会读取initrd.img 启动镜像.该文件中包含驱动模块等信息,是非常重要的文件.不同版本使用的格式不同.1. ...

  8. Android平台利用OpenCL框架实现并行开发初试

    http://www.cnblogs.com/lifan3a/articles/4607659.html 在我们熟知的桌面平台,GPU得到了极为广泛的应用,小到各种电子游戏,大到高性能计算,多核心.高 ...

  9. 编写Tesseract的Python扩展

    Tesseract是一个开源的OCR(光学字符识别)引擎,用于识别并输出图片中的文字.虽然和商业软件比起来识别精度不算很高,但是如果你要寻找免费开源的OCR引擎,可能Tesseract就是唯一的选择了 ...

  10. Nginx进阶-不停服更新

    前言 7*24小时不间断的提供对外服务和产品快速迭代是互联网行业的特征,基于需求所有的发布都不能停止当前对外的服务.本文围绕此话题衍生出,不停服上下线工具实现. 看本文前请先看 Nginx初识 Ten ...