IE是第一个支持与剪贴板相关的事件,以及通过JavaScript访问剪贴板数据的浏览器。IE的实现成为了某种标准,不仅Safari 2、Chrome和Firefox 3也都支持类似的事件和剪贴板(Oprea不支持通过JavaScript访问剪贴板),就连后来的HTML 5也引入了剪贴板事件。下列就是6个剪贴板事件:

  • beforecopy:在发生复制操作前触发;
  • copy:在发生复制操作时触发
  • cut:在发生剪切操作时触发
  • beforeecut:在发生剪切操作前触发,
  • paste:在发生粘贴操作时触发

由于没有针对剪贴板操作的标准,这些事件及相关对象会因为浏览器而已。在Safari、Chrome和Firefox中,beforecopy、beforecut和beforepaste事件只会在针对文本框的上下文菜单的情况下触发。但是IE则会在触发copy、cut和paste事件之前先行触发这些事件。至于copy、cut和paste事件,只要在上下文菜单中选择了相应的选项,或者使用了相应的键盘组合键,所有浏览器都会触发它们。

在实际的事件发生之前,通过beforecpy、beforecut和beforepaste事件可以在向剪贴板发送数据,或者从剪贴板取得数据之前修改数据。不过,取消这些事件并不会取消对剪切板的操作——只有取消copy、cut和paste事件,才能阻止相应操作发生。

要访问剪贴板中的数据,可以使用clipboardData对象:在IE中,这个对象是window对象的属性;而在Safari和Chrome中,这个对象是相应event对象的属性。但是,Firefox不支持clipboardData对象。而且,在Safari和Chrom中,只有在处理剪贴板事件期间clipboardData对象才有效,这是为了防止对剪贴板的未授权访问;在IE中,则可以随时访问clopboardDate对象。为了确保跨浏览器兼容性,最好只发生剪贴板事件期间使用这个对象。

这个clipboardData对象有3个方法:getDate()、setDate()和clearDate()。其中,getDate()用于从剪贴板中取得数据,它接受一个参数,即要取得的数据的格式。在IE中,有两种数据格式:“text”和“URL”。在Safari和Chrome中,这个参数是一种MIME类型;不过,可以使用“text”代表“text/plain”。

类似地,setDate()方法的第一个参数也是数据类型,第二个参数是要放在剪贴板中的文本。对于第一个参数,IE照样支持“text”和“URL”,而Safari和Chrome仍然只支持MIME类型。但是,与getDate()方法不同的是,Sarai和Chrome的setData()方法不能识别“text”类型。这两个浏览器在成功将文本放到剪贴板中后,都会返回true;否则,返回false。为了弥合这些差异,我们可以向EventUtil中添加下列方法:

  1. var EventUtil = {
  2. addHandler: function (element, type, handler) {
  3. if (element.addEventListener) {
  4. element.addEventListener(type, handler, false);
  5. } else if (element.attachEvent) {
  6. element.attachEvent("on" + type, handler);
  7. } else {
  8. element["on" + type] = handler;
  9. }
  10. },
  11. getEvent: function (event) {
  12. return event ? event : window.event;
  13. },
  14. getClipboardText: function (event) {
  15. var clipboardData = (event.clipboardData || window.clipboardData);
  16. return clipboardData.getData("text");
  17. },
  18. setClipboardText: function (event, value) {
  19. if (event.clipboardData) {
  20. return event.clipboardData.setData("text/plain", value);
  21. } else if (window.clipboardData) {
  22. return window.clipboardData.setData("text", value);
  23. }
  24. },
  25. preventDefault: function (event) {
  26. if (event.preventDefault) {
  27. event.preventDefault();
  28. } else {
  29. event.returnValue = false;
  30. }
  31. }
  32. };

这里的getClipboardText()方法相对简单;它只要确定clipboardData对象的位置,然后再以“text”类型调用getDate()方法即可。相应地,setClipboardText()方法则要稍微复杂一些。在取得clipboardData对象之后,需要根据不同的浏览器实现为setDate()传入不同的类型(对于Safari和Chrome,是“text/plain”;对于IE是”text”)。

在需要确保粘贴到文本框中的文本中包含某些字符,或者符合某种格式要求时,能够访问剪贴板是非常有用的。例如,如果有一个文本框值接受数值,那么就必须检测粘贴过来的值,以确保有效。在paste事件中,可以确定剪贴板中的值是否有效,如果无效,就可以像下面示例中那样,取消默认的行为。

  1. var textbox = document.forms[0].elements["textbox1"]
  2. EventUtil.addHandler(textbox, "paste", function (event) {
  3. event = EventUtil.getEvent(event);
  4. var text = EventUtil.getClipboardText(event);
  5.  
  6. if (!/^\d*$/.test(text)) {
  7. EventUtil.preventDefault(event);
  8. }
  9. });

在这里,onpaste事件处理程序可以确保只有数值才会被粘贴到文本框中,如果剪贴板的值与正则表达式不匹配,则会取消粘贴操作。Safari和Chrome值允许在onpaste事件处理程序中访问getDate()方法。
同样,也可以将数据设置到剪贴板中,这样就可以覆盖基于元素的默认剪切或复制功能。来看下面的例子:

  1. var textbox = document.forms[0].elements["textbox1"]
  2. EventUtil.addHandler(textbox, "copy", function (event) {
  3. event = EventUtil.getEvent(event);
  4. EventUtil.preventDefault(event);
  5. EventUtil.setClipboardText(event, "Hello world!");
  6. });

在这个例子中,我们覆盖了文本框的copy事件,将字符串“Hello world!”放到了剪贴板中。结果,就不会将文本框中的文本赋值到剪贴板中了。

由于并非所有浏览器都支持访问剪贴板,所以更简单的做法是屏蔽一或多个剪贴板操作。在支持copy、cut和paste事件的浏览器中(IE、Safari、Chrome和Firefox3及更高版本),很容易阻止这些事件的默认性。在Opera中,则需要阻止那些会触发这些事件的按键操作,同时还要阻止在文本框中显示上下文菜单。

更多:

js 操作剪切板

JavaScript操作剪贴板(转)的更多相关文章

  1. JavaScript操作XML

    JavaScript操作XML (一) JavaScript操作XML是通过XML DOM来完成的.那么什么是XML DOM呢?XML DOM 是: 用于 XML 的标准对象模型 用于 XML 的标准 ...

  2. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  3. 在Javascript操作JSON对象,增加 删除 修改

    在Javascript操作JSON对象,增加删除修改全有的,详情见代码 <script type="text/javascript"> var jsonObj2 = { ...

  4. javascript 操作复选框无效

    <script type="text/javascript"> // 操作checkbox复选框按钮 var inputs = $('#article_list').f ...

  5. 用javascript操作xml

    用javascript操作xml 可以使用标准DOM操作. IE创建XML MSXML2.0DOMDocument function createXMLDOM(){ var version = [ ' ...

  6. Cookie介绍及JavaScript操作Cookie方法详解

    本文主要为大家简单介绍了以下Cookie的用途.运行机制,以及JavaScript操作Cookie的各种方法,总结的比较全面,希望能给大家带来帮助. 什么是 Cookie “cookie 是存储于访问 ...

  7. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  8. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

  9. Python javascript操作DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

随机推荐

  1. ASP.NET MVC3.0或4.0设置二级域名的方法

    之前我就想做二级域名指向同一个IP同一个程序无非是在路由匹配规则上做文章也就是对Url的重写的一种思路.我用了半天时间上网查阅了相关资料并做了Demo测试是完全 以的,在这分享给大家... 假如网站主 ...

  2. Android常见开源解决方案

    原文:http://m.pstatp.com/group/6348269082899497218/?iid=6036708044&app=news_article&tt_from=mo ...

  3. ORACLE中将数字转换为英文

    SELECT LEVEL, to_char(to_date(LEVEL,'J'),'Jsp') FROM dual CONNECT 运行结果如下图所示:   说明: TO_CHAR(aDate,'JS ...

  4. ORA-02447: cannot defer a constraint that is not deferrable

    一个constraint如果被定义成deferrable那么这个constraints可以在deferred和imediate两种状态相互转换. deferred只在transaction中有效,也就 ...

  5. Swift 面向对象

    import Foundation class Hi{ func sayHi(){ print("HI jinpanpang") } } class Hello:Hi { var ...

  6. java鼠标与键盘事件监听

    package cn.stat.p3.windowdemo; import java.awt.Button; import java.awt.FlowLayout; import java.awt.F ...

  7. 内核参数优化之2-1 tcp/ip 标志位报文解析

    以下内容纯属虚构,切勿轻易相信! 众所周知,tcp/ip三次握手和四次挥手,均由syn/ack/fin三个标志位报文决定,但是这三个标志位报文,并不是说在构建连接的时候只发送一次的,因为协议不知道网络 ...

  8. 类和对象:给大家介绍对象 - 零基础入门学习Python036

    类和对象:给大家介绍对象 让编程改变世界 Change the world by program 我们之前说过Python无处不对象,Python到处都是对象,然后你会发现很多童鞋其实并不知道对象是什 ...

  9. C 带指针样式的时钟

    #include <stdio.h> #include <malloc.h>#include<graphics.h>#include<conio.h> ...

  10. 查看服务器IP连接数之主要命令(在服务器受攻击时用)

    查看TCP几种状态的总数 netstat -n | awk '/^tcp/ {++S[$NF]} END {fo (a in S). print a, S[a]}' 按IP查看连接数排序 netsta ...