📌  相关文章
📜  HTML | DOM oncopy 事件(1)

📅  最后修改于: 2023-12-03 15:15:35.403000             🧑  作者: Mango

HTML | DOM oncopy 事件

在 HTML 中，oncopy 事件在用户复制文本时触发。该事件允许开发人员在复制文本时执行自定义代码。

语法

  • HTML 元素中使用属性：

    <element oncopy="myScript">

  • DOM 中使用方法：

    element.oncopy = function(){myScript};
示例
HTML 属性示例

在以下示例中，单击按钮将在输入框中显示文本。当复制此文本时，将触发 oncopy 事件并调用 alertCopied() 函数。

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput">
<button onclick="document.getElementById('myInput').value='Hello World!'">点击我</button>

<script>
function alertCopied() {
  alert("复制成功！");
}
</script>

<p oncopy="alertCopied()">请复制上面的文本。</p>

</body>
</html>
DOM 方法示例

在以下示例中，与上述 HTML 示例相同的功能被实现。但是，这里是使用 DOM 方法来添加事件处理程序。

<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput">
<button onclick="document.getElementById('myInput').value='Hello World!'">点击我</button>

<script>
document.getElementsByTagName("p")[0].oncopy = function() {
  alert("复制成功！");
};
</script>

<p>请复制上面的文本。</p>

</body>
</html>
可能的返回值

oncopy 事件不返回任何值。

浏览器兼容性

| IE | Edge | Firefox | Chrome | Safari | | --- | ---- | ------- | ------ | ------ | | 4.0 | 12.0 | 3.5 | 43.0 | 10.3 |

总结

oncopy 事件在复制文本时触发，它允许开发人员添加自定义代码。它可以通过 HTML 属性或 JavaScript 来设置，并可以使用 DOM 方法来添加事件处理程序。