• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 剪贴板事件

    以下三个事件属于剪贴板操作的相关事件。

    • cut:将选中的内容从文档中移除,加入剪贴板时触发。
    • copy:进行复制动作时触发。
    • paste:剪贴板内容粘贴到文档后触发。

    举例来说,如果希望禁止输入框的粘贴事件,可以使用下面的代码。

    inputElement.addEventListener('paste', e => e.preventDefault());
    

    上面的代码使得用户无法在<input>输入框里面粘贴内容。

    cutcopypaste这三个事件的事件对象都是ClipboardEvent接口的实例。ClipboardEvent有一个实例属性clipboardData,是一个 DataTransfer 对象,存放剪贴的数据。具体的 API 接口和操作方法,请参见《拖拉事件》的 DataTransfer 对象部分。

    document.addEventListener('copy', function (e) {
      e.clipboardData.setData('text/plain', 'Hello, world!');
      e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
      e.preventDefault();
    });
    

    上面的代码使得复制进入剪贴板的,都是开发者指定的数据,而不是用户想要拷贝的数据。

    上篇:窗口事件

    下篇:焦点事件