剪下板操作包括複製（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()來阻止預設行為