原生JS实现复制与粘贴

2017年11月07日Web前端

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

一、剪贴板事件

  • 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');
    }
}

三、兼容性

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