事件类型-剪切板操作

剪切板操作包括复制(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>
<div id="t1">hello</div>
<input id="t2">
<input value="hello" id="t3">
<script>
  t1.onbeforecopy = function(e) {
    console.log(e.type)
  }
  t2.onbeforepaste = function(e) {
    console.log(e.type)
  }
  t3.onbeforecut = 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;
}

posted @ 2018-08-30 14:53:00 浏览(259) JavaScript笔记

avatar