JavaScript操作剪贴板的方法分享

发布时间:2019-12-31编辑:脚本学堂
本文介绍下,javascript操作剪贴板实现复杂、粘贴的方法,有需要的朋友参考学习下。

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事件,才能阻止相应操作发生。

要访问剪贴板中的数据,可以使用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中,则需要阻止那些会触发这些事件的按键操作,同时还要阻止在文本框中显示上下文菜单。