原生JS实现复制与粘贴

我们经常要在网页上浏览信息，而复制与粘贴就会经常用到。

一、剪贴板事件

beforecopy：在发生复制操作前触发。

copy：在发生复制操作的时候触发。

beforecut：在发生剪切操作前触发。

cut：在发生剪切操作的时候触发。

beforepaste：在发生粘贴操作前触发。

paste：在发生粘贴操作的时候触发。

二、访问剪贴板数据：clipboardData对象

在非IE浏览器下，只有在处理剪贴板事件期间，clipboardData对象才有效，他是对应event对象的属性。

在IE下，clipboardData对象是window对象的属性。

2.1 clipboardData对象的方法

getData()

setData()

clearData()

2.1.1 getData()

该方法用于从剪贴板中获取数据，接受一个参数，即要取得的数据格式。

IE中支持“text”和“URL”。非IE中，这个参数是MIME类型。不过，可以用“text”代表“text/plain”。

function getClipboardData(e) {
    var clipboardData = e.clipboardData || window.clipboardData;
    
    return clipboardData.getData('text');
}

2.1.2 setData()

该方法的第一个参数是数据类型，第二个参数是要放在剪贴板中的数据。

第一个参数，IE依然是支持’text’和’URL’，而其他非IE浏览器中，仍然支持的是MIME类型。在成功将文本放到剪贴板中后，该方法会返回true，否则返回false。

function setClipboardData(e) {
    if (e.clipboardData) {
        return e.clipboardData.setData('text/plain','1111');
    } else if (window.clipboardData) {
        return e.clipboardData.setData('text','1111');
    }
}

三、兼容性

我们发现，该原生方法的兼容性还是有很长的路要走。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!