原生JS实现复制与粘贴

2017年11月07日Web前端0

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

一、剪贴板事件

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

三、兼容性

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

JavaScript

目录