HTML DOM 剪贴板事件
htmlweb developmentfront end technology更新于 2025/9/23 7:40:17
HTML DOM 剪贴板事件用于提供有关剪贴板修改的信息。该事件可以执行剪切、复制和粘贴操作。 Clipboard 事件可用于提升网站的可访问性，例如，向用户提供有关剪贴板修改方式的信息。
属性
以下是 Clipboard 事件的属性 −
| 属性 | 描述 |
|---|---|
| clipboardData | 返回一个对象，其中包含受剪贴板操作(剪切、复制或粘贴)影响的数据。 |
事件
以下是属于 Clipboard 事件的事件类型 −
| 事件 | 描述 |
|---|---|
| oncopy | 此事件在以下情况下触发元素内容被用户复制。 |
| Oncut | 当用户剪切元素内容时触发此事件 |
| Onpaste | 当用户粘贴元素内容时触发此事件 |
语法
以下是剪贴板事件 − 的语法
var clipboardEvent = new ClipboardEvent(type,[options]);
其中，type 可以是 ‘cut’、’copy’ 或 ‘paste’，第二个参数是可选的。第二个参数包含 clipboardData、dataType 和 data。
示例
让我们来看一个剪贴板事件 oncopy 的示例 −
<!DOCTYPE html>
<html>
<body>
<form>
<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">
</label>
</form>
<p id="Sample"></p>
<script>
function CopyText() {
document.getElementById("Sample").innerHTML = "The text has been copied by you!"
}
</script>
</body>
</html>
输出
这将产生以下输出 −
复制文本框内的文本 −
在上面的例子中 −
我们创建了一个文本类型的 <input> 元素。它被分配了一个标签 TEXTBOX，并且里面已经包含了一些文本供用户选择。当用户复制文本时，将执行 CopyText() 方法。
<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">
CopyText() 方法使用 document 的 getElementById() 方法获取 <p> 元素，并在段落内显示 “您已复制此文本!>。
function CopyText() {
document.getElementById("Sample").innerHTML = "The text has been copied by you!"
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
