事件類型-剪切板操作

剪切板操作包括復制（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()來阻止默認行為