剪贴板事件
以下三个事件属于剪贴板操作的相关事件。
cut
:将选中的内容从文档中移除,加入剪贴板时触发。copy
:进行复制动作时触发。paste
:剪贴板内容粘贴到文档后触发。
举例来说,如果希望禁止输入框的粘贴事件,可以使用下面的代码。
inputElement.addEventListener('paste', e => e.preventDefault());
上面的代码使得用户无法在<input>
输入框里面粘贴内容。
cut
、copy
、paste
这三个事件的事件对象都是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(); });
上面的代码使得复制进入剪贴板的,都是开发者指定的数据,而不是用户想要拷贝的数据。