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

这个功能有两个办法一个是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. jdk1.7 ArrayList源码浅析

    参考:http://www.cnblogs.com/xrq730/p/4989451.html(借鉴的有点多,哈哈) 首先介绍ArrayList的特性: 1.允许元素为空.允许重复元素 2.有序,即插 ...

  2. beego——静态文件

    Go 语言内部其实已经提供了 http.ServeFile,通过这个函数可以实现静态文件的服务. beego 针对这个功能进行了一层封装,通过下面的方式进行静态文件注册: beego.SetStati ...

  3. List集合的ForEach扩展

           public static void ForEach<T>(this IEnumerable<T> enumerableSource, Action<T&g ...

  4. 字符数组（char）和字符串（string）的转换

    #include<iostream>#include<string>using namespace std;void main(){ string LyuS = "W ...

  5. phoenix部署手册-基于hbase

    背景描述: phoenix基于hbase的SQL层,映射hbase的表,也可以映射视图(VIEW) 部署安装比较简单 映射表和视图的区别: 映射表: 在Phoenix建表错误不易更改: 删除会连同hb ...

  6. const修饰的常量 不能被直接修改 但是可以通过指针进行间接修改

    大家都知道如下代码中,被const限定的a是不可以被直接修改的 void main() { const int a = 3; a=1; } 在C++中const修饰的常量,不能被直接修改,但是可以通过 ...

  7. NOIP 马拦过河卒

    描述 棋盘上A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右.同时在棋盘上C点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点.因此称之为“马拦过河卒”. 棋盘 ...

  8. 利用war包和Tomcat镜像创建Web镜像

      from hub.c.163.com/library/tomcat:tag #代表以tomcat镜像为基础 MAINTAINER huhuixin 18611551449@163.com #代表所 ...

  9. 使用Idea 配置maven

    使用Idea 配置maven 使用idea 配置maven有4步: (1)下载Idea,maven (2)安装idea, (3)设置maven的环境变量, (4)具体的配置过程 当前环境: 操作系统: ...

  10. 从reduce函数说起...

    reduce函数:  方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值, 最终返回的要看函数内部return的内容. 1. 累加器: var ar ...