这是一个很有意思的地方,很多不了解的人或者初级的js编程者会觉得很不可思议,js都那么强大了,访问剪贴板一个粘贴复制,大概就是一行命令的事情,但是事实如此,js对于访问本地计算机的剪贴板的支持其实是十分滞后的,看起来似乎是一个很小很小的一个功能,其实即使是html5标准里对于剪贴板操作目前也仍处于草案提议阶段,各浏览器有自己各自的部分实现方案,有的甚至根本就没有需要的实现接口,而且事实上,访问剪贴板的接口标准制定并不是那么容易的一件事情,需要考虑的事情有很多方面,具体哪些地方感兴趣的可以参考这里

需要标准还在建立中,但是事实上,遇到类似的需求我们并不是不能实现,所以这里总结一下大致几种实现方案:

1.window.clipboardData对象   (有兼容性问题,火狐上不行,支持ie,其它浏览器未知)

当复制的时候body的oncopy事件被触发,直接return false就是禁止复制,注意是不能复制网页里的文本了
<body oncopy="alert('禁止复制!');return false;">

clipboardData对象 ,注意网页里剪贴板到现在只能设置Text类型，即只能复制文本
clearData("Text")         清空粘贴板       clearData(sDataFormat) 删除剪贴板中指定格式的数据。
getData("Text")           读取粘贴板的值   getData(sDataFormat) 从剪贴板获取指定格式的数据。
setData("Text",val)       设置粘贴板的值   setData(sDataFormat, sData) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。

复制的数据加入相关来源
clipboardData.setData('Text',clipboardData.getData('Text') +
'\r\n来自Pigeon网站' + location.href);

调用时注意不能再body 的oncopy事件上直接用 <body oncopy="setTimeout('ModifyCopyData()',100)">

2.例子:

<input type="text" onclick="oCopy(this)" value="你好.要copy的内容!">

<script>

    function oCopy(obj){

        obj.select();    // 选中输入框中的内容

        js=obj.createTextRange();

        js.execCommand("Copy") ;

    }

</script>

注意: creatTextRange() 方法是 ms-only的方法 非微软家的不可用,会报错.
      execCommand 方法通常用于控制可编辑的 IFRAME 内容，制作富文本编辑器。 但他现在为止还是非标准的，方法的首参数 Commmands 的可选值由各个浏览器厂商制定，支持程度并不统一。
      详细说明:http://www.w3help.org/zh-cn/causes/BX9054
      测试各浏览支持情况: http://www.w3help.org/tests/BX9054/execCommand_sCommands_Parameters.html
      使用例子:      http://blog.csdn.net/woshinia/article/details/18664903
      打印,另存为等都是通过这个命令

3.好的方案:

Clipboard.js：不用Flash实现剪贴板功能的轻量级JavaScript库,
主流浏览器都支持这个库，Safari目前仍不支持cut和copy指令,它使用execCommand实现

使用adobe flash 的方式 zeroclipboard http://zeroclipboard.org/   Github用JavaScript库ZeroClipboard来实现这一功能
或者用 jquery.zclip.js jquery封装后的  使用例子: http://www.cnblogs.com/linjiqin/p/3532451.html

html5的剪贴板提议仍在进行中 https://w3c.github.io/clipboard-apis/
具体可用情况可以使用这里can i use it?     http://caniuse.com/#search=clipboard

js剪贴板操作的更多相关文章

  1. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

  2. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  3. node.js高效操作mongodb

    node.js高效操作mongodb Mongoose库简而言之就是在node环境中操作MongoDB数据库的一种便捷的封装,一种对象模型工具,类似ORM,Mongoose将数据库中的数据转换为Jav ...

  4. js字符串操作

    javascript中字符串常用操作总结.JS字符串操作大全 String对象属性 (1) length属性 length算是字符串中非常常用的一个属性了,它的功能是获取字符串的长度.当然需要注意的是 ...

  5. Node.js之操作文件系统（一）

    Node.js之操作文件系统(一) 1. 同步方法与异步方法 在Node.js中,使用fs模块来实现所有有关文件及目录的创建.写入及删除操作.,在fs模块中,所有对文件及目录的操作都可以使用同步与异步 ...

  6. Node.js之操作文件系统（二）

    Node.js之操作文件系统(二) 1.创建与读取目录 1.1 创建目录 在fs模块中,可以使用mkdir方法创建目录,该方法的使用方法如下: fs.mkdir(path,[mode],callbca ...

  7. js数组操作-添加，删除

    js 数组操作常用方法. push():在数组后面加入元素,并返回数组的长度 unshift():在数组前面加入元素,并返回数组的长度 pop()删除最后一个元素 shift()删除第一个元素 var ...

  8. 页面循环绑定（变量污染问题），js面向对象编程（对象属性增删改查），js字符串操作，js数组操作

    页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...

  9. js数组操作-最佳图解

    js数组操作-最佳图解

随机推荐

  1. 阿里云Linux服务器，挂载硬盘并将系统盘数据迁移到数据盘

    因为之前用宝塔上线,宝塔只挂载了系统盘50G,打开阿里云云盘列表发现系统盘无法直接升级,故另买一块数据盘挂载到Linux服务器下,下面根据网上教程再结合我实际情况讲解一下实际操作,其实非常easy l ...

  2. 購買管理(MM)

    ■購買管理■ [購買伝票]EKKO: ヘッダ EKPO: 明細 EKET: 納入日程行 EKPA: 取引先機能 EKKN: 勘定設定 EKBE: 後続伝票 EKBEH: 削除済み後続伝票履歴 [請求書 ...

  3. 3，Flask 中的模板语言 Jinja2 及 render_template 的深度用法

    Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下 首先我们要在后端定义几个字符串,用于传递到前端 S ...

  4. 挂个AC自动机

    struct ACM{ ],f[N],cnt[N]; int sz,rt; int ins(char *s){ int n=strlen(s),u=rt; ;i<n;i++){ int c=s[ ...

  5. https refused 解决方法

    今天调试Android程序,所有的手机都ok,后来,我一个手机一直说,refused. 其实这就说明代码是没有问题的,你应该可以根据这个把代码的原因排除.然后剩下的,网络请求还能有什么,网路白. 果然 ...

  6. spark发现新词

    package com.icklick.spark.wordSegment import org.apache.log4j.{ Level, Logger } import org.apache.sp ...

  7. C语言中强制类型转换总结

    C语言中强制类型转换总结  ● 字符型变量的值实质上是一个8位的整数值,因此取值范围一般是-128-127,char型变量也可以加修饰符unsigned,则unsigned char 型变量的取值范围 ...

  8. Jmeter日期

    有的时候我们接口中会有需要传递日期的参数,这是jmeter工具中给我准备一个 日期函数_time,如下图所示: 取到的将会是年月日 对应的写法有 yyyy-MM-dd HH:mm:ss  ---年月日 ...

  9. day06_06 字典操作01

    1.0 字典操作 dic1 = {'name':'alex'} dic1['age'] = 18 print(dic1) #>>>{'age': 18, 'name': 'alex' ...

  10. OpenCV_1.0安装包下载

    OpenCV_1.0安装包下载 点击下载