事件类型剪切板操作

剪切板操作包括复制（copy）、粘贴（paste）、剪切（cut），快捷键分别是ctrl+c、ctrl+v、ctrl+x

3个操作对应6个剪切板事件

copy：在发生复制操作时触发

paste：在发生粘贴操作时触发

cut：在发生剪切操作时触发

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

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

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

通常情况下，cut和paste发生在可聚焦的文本框中（如input、textarea），copy可在任何文本选中时触发

<div id="t1">hello</div>
<input id="t2">
<input value="hello" id="t3">
<script>
  t1.oncopy = function(e) {
    console.log(e.type)
  }
  t2.onpaste = function(e) {
    console.log(e.type)
  }
  t3.oncut = function(e) {
    console.log(e.type)
  }
</script>

对象方法

剪切板中的数据存储在clipboardData对象中。对于IE浏览器来说，这个对象是window对象的属性；对于其他浏览器来说，这个对象是事件对象的属性

这个对象有三个方法：getData()、setData()和clearData()

getData()

getData()方法用于从剪贴板中取得数据，它接受一个参数，即要取得的数据的格式，这个参数是一种MIME类型。为了浏览器兼容性，MIME类型通常使用text

<input id="t2">
<script>
  t2.onpaste = function(e) {
    var clipboardData = e.clipboardData || window.clipboardData;
    this.value = '测试：' + clipboardData.getData('text');
    return  false;
  }
</script>

setData()

setData()方法的第一个参数也表示数据格式，第二个参数是要放在剪贴板中的文本

小示例：当复制内容时添加版权信息

<div>hello world</div>
<script>
  document.oncopy = function(e) {
    var clipboardData = e.clipboardData || window.clipboardData;
    // 获取选中内容
    var userSelection = '';
    if (window.getSelection) {
      userSelection = window.getSelection().toString();
    } else if (document.selection) {
      userSelection = document.selection.createRange().toString();
    }
    // 添加版权信息
    userSelection = '版权归作者所有\n' + userSelection;
    clipboardData.setData('text', userSelection);
    return false;
  }
</script>

clearData()

clearData()方法用于从剪贴板中删除数据，它接受一个参数，即要清除的数据的格式

<div>hello world</div>
<script>
  document.oncopy = function(e) {
    var clipboardData = e.clipboardData || window.clipboardData;
    clipboardData.clearData('text');
    return false;
  }
</script>

小应用

屏蔽剪贴板，保护有版权的文档

document.oncopy=document.oncut = document.onpaste = function(e){
  alert('该文档不允许复制剪贴操作')
  return false;
}

说明：return false是为了阻止默认行为，也可以使用e.preventDefault()来阻止默认行为