在 HTML 中复制元素内容时执行脚本?

htmlweb developmentfront end technology更新于 2025/4/10 3:56:17

当用户复制元素内容时，会触发 oncopy 事件。当用户复制元素(例如使用 <img> 元素制作的图像)时，也会触发 oncopy 事件。type="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>