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

这个功能有两个办法一个是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++ 11 bind function

    Year 2011陈 良乔C++11 FAQ std::function 和 std::bind 标准库函数bind()和function()定义于头文件中(该头文件还包括许多其他函数对象),用于处理 ...

  2. Python基础、判断、循环、列表、字典，day1

    一.Python 简介 1.介绍 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标 ...

  3. 基于对象的跨表查询，多对多查询，多对多操作，聚合查询和分组查询，F查询和Q 查询

    基于对象的跨表查询 一对多查询(班级表和学生表) 表结构创建 class Class(models.Model): id = models.AutoField(primary_key=True) cn ...

  4. delphi winio 输入

    var key:byte;//ASCII码 btScancode:DWord; //键码begin key:=VkKeyScan('b'); btScancode:= MapVirtualKey(ke ...

  5. WinIo简介

    WinIo简介 一日发现SendInput对某程序居然无效,无奈只好开始研究WinIo.上网查了很多资料,发现关于WinIo模拟鼠标键盘的资料很少,有的也只是支言片语讲的不是很详细,而且大部分都是关于 ...

  6. ul,li设置inline-block缝隙

    去掉换行符和空白符 margin-left: -0.5em(缝隙大小不确定) ul字号设为0,li设置字号 (有些浏览器设置最小字体) js移除空白子节点

  7. Java面向对象—抽象类和接口

    本文引用海子的一篇文章:http://www.cnblogs.com/dolphin0520/p/3811437.html 一.抽象类 在了解抽象类之前,先来了解一下抽象方法.抽象方法是一种特殊的方法 ...

  8. HDOJ_1087_Super Jumping! Jumping! Jumping! 【DP】

    HDOJ_1087_Super Jumping! Jumping! Jumping! [DP] Time Limit: 2000/1000 MS (Java/Others) Memory Limit: ...

  9. Java学习笔记之Java 继承中的构造方法

    参考

  10. MySQL-5.7 存储过程及函数

    1.语法 CREATE [DEFINER = { user | CURRENT_USER }] PROCEDURE sp_name ([proc_parameter[,...]]) [characte ...