JavaScript中的HTMLElement.prototype.copy

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/03/29/JavaScript%E4%B8%AD%E7%9A%84HTMLElement-prototype-oncopy/

摘要

本文主要讲述了：

作用

正文

作用

监听复制事件
修改复制内容

注意：

出于安全考虑，<input type="password" />是不可以复制的。在 Chrome 中，甚至连copy事件都不会触发
若要修改复制内容，必须使用event.preventDefault()阻止事件的默认行为

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="foo">hello, jsweibo</div>
    <script>
      document.querySelector('#foo').addEventListener('copy', function (event) {
        console.log(event);
      });
    </script>
  </body>
</html>

示例：在 Chrome 中，甚至连copy事件都不会触发

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="password" id="foo" />
    <script>
      document.querySelector('#foo').addEventListener('copy', function (event) {
        console.log(event);
      });
    </script>
  </body>
</html>

示例：修改复制内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="foo">hello, jsweibo</div>
    <script>
      document.querySelector('#foo').addEventListener('copy', function (event) {
        console.log(event);
        event.preventDefault();
        event.clipboardData.setData(
          'text/plain',
          getSelection().toString() + '\nCopyright: https://jsweibo.github.io/'
        );
      });
    </script>
  </body>
</html>