操作剪贴板相关的事件

E是第一个支持与剪贴板相关的事件，以及通过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事件，才能阻止相应操作发生。

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

这个clipboardDate对象有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中添加下列方法：

var EventUtil = {addHandler: function (element, type, handler) {if (element.addEventListener) {element.addEventListener(type, handler, false);} else if (element.attachEvent) {element.attachEvent("on" + type, handler);} else {element["on" + type] = handler;}},getEvent: function (event) {return event ? event : window.event;},getClipboardText: function (event) {var clipboardData = (event.clipboardData || window.clipboardData);return clipboardData.getData("text");},setClipboardText: function (event, value) {if (event.clipboardData) {return event.clipboardData.setData("text/plain", value);} else if (window.clipboardData) {return window.clipboardData.setData("text", value);}},preventDefault: function (event) {if (event.preventDefault) {event.preventDefault();} else {event.returnValue = false;}}
};

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

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

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

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

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

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

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

操作剪贴板相关的事件相关推荐

VB6监视/操作剪贴板示例(VB6.0代码)
剪贴板的监视,需要先使用SetClipboardViewer设置某个句柄为剪贴板查看器的一员. 然后当剪贴板发生改变时,系统就会向这个句柄发送WM_DRAWCLIPBOARD消息. 只要使用子类化拦截 ...
C#理论 —— 文件操作、委托和事件
文章目录 1. 文件操作 1.1 获取计算机驱动器信息Driveinfo 1.2 文件夹操作Directory.Directoryinfo 1.3 文件操作File.FileInfo 1.4 文件路径 ...
JavaScript对SVG进行操作的相关技术
原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgscript/ 本文主要介绍在 SVG 中通过编程实现动态操作 SVG 图像的知识. SVG 图像 ...
php操作剪贴板内容代码,详细解答JS操作剪贴板
本篇文章给大家介绍了如何用JS操作剪贴板的功能,并把实例代码做了分享,需要的朋友学习下吧. javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器. javascript可以使用 ...
Javascript Tip(1) 操作剪贴板
javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器 javascript可以使用window.clipboardData对象处理剪贴板内容保存到剪贴板的方法 setData ...
SAP MM 物料库存转固定资产业务操作以及相关财务凭证
SAP MM 物料库存转固定资产业务操作以及相关财务凭证使用事务代码MIGO,移动类型241,可以将某个物料的库存转为固定资产. 1, 在MIGO事务代码的界面,选择A07 Goods Issue, ...
python多线程读取数据库数据_Python基于多线程操作数据库相关知识点详解
Python基于多线程操作数据库相关问题分析本文实例分析了Python多线程操作数据库相关问题.分享给大家供大家参考,具体如下: python多线程并发操作数据库,会存在链接数据库超时.数据库连接丢 ...
使用PostgREST的RestAPI操作之相关软件生态系统
使用PostgREST的RestAPI操作之相关软件生态系统示例应用程序 tatut / postgrest-ui -PostgREST的ClojureScript UI组件 priyank-pur ...
php操作剪贴板内容代码,JavaScript操作剪贴板的实现方法介绍
本篇文章给大家带来的内容是关于JavaScript操作剪贴板的实现方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 通过 js 可以操作剪贴板的复制剪切粘贴用到的方法和 ...

操作剪贴板相关的事件

操作剪贴板相关的事件相关推荐

最新文章

热门文章