如何在 HTML 中复制元素内容时执行脚本？

当用户复制元素内容时，会触发 oncopy 事件。当用户复制元素（例如使用 <img> 元素创建的图像）时，也会触发 oncopy 事件。类型为 "text" 的 <input> 元素通常使用 oncopy 事件。

以下是示例…

示例

在以下示例中，我们在复制 <input> 元素文本时运行 JavaScript。

<!DOCTYPE html>
<html>
<body>
   <input type="text" oncopy="myFunction()" value="Welcome to tutorialspoint">
   <p id="tutorial"></p>
   <script>
      function myFunction() {
         document.getElementById("tutorial").innerHTML = "Text is copied!"
      }
   </script>
</body>
</html>

输出

当脚本执行时，窗口会弹出一个包含“欢迎来到 tutorialspoint”的文本，当我们尝试复制文本时，它会显示“文本已复制”。

示例：（使用 addEventListener()）

在以下示例中，我们使用 addeventlistener() 方法来了解文本何时被复制。

<!DOCTYPE html>
<html>
<body>
   <input type="text" id="tutorial" value="The Best E-Way">
   <script>
      document.getElementById("tutorial").addEventListener("copy", mytutorial1);
      function mytutorial1() {
         alert("Text Get Copied !");
      }
   </script>
</body>
</html>

输出

执行上述脚本后，它将显示文本“最好的电子方式”，当我们尝试复制文本时，它会创建一个警报，提示“文本已复制”。

更新于：2022-09-05

111 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告