复制粘贴功能

最新推荐文章于 2024-07-22 15:13:59 发布

qq_48003500

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量34

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_48003500/article/details/131122846

版权

效果图

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="base.css" />
    <title>Clipboard API</title>
  </head>
  <body>
    <main>
      <div>
        <div class="codeBlock">
          <code>let a = 1;</code>
          <button id="copy">复制</button>
        </div>
        <div class="editor">
          <textarea id="codeEditor" cols="20" rows="10"></textarea>
          <button id="paste">粘贴</button>
        </div>
      </div>
    </main>

    <script>
      const copyBtn = document.getElementById("copy");
      const codeEle = document.querySelector(".codeBlock code");

      const pasteBtn = document.getElementById("paste");
      const codeEditorEle = document.getElementById("codeEditor");

      copyBtn.addEventListener("click", () => {
        navigator.clipboard
          .writeText(codeEle.innerText)
          .then(() => alert("复制成功！"));
      });

      pasteBtn.addEventListener("click", () => {
        navigator.clipboard.readText().then((text) => {
          codeEditorEle.innerText = text;
        });
      });
    </script>
  </body>
</html>

css

main {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}

.codeBlock {
  display: flex;
  align-items: center;
}

code {
  font-size: 18px;
  background: hsl(0deg, 0%, 10%);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
}

button {
  background: linear-gradient(45deg, hsl(240, 100%, 50%), hsl(290, 100%, 50%));
  border-radius: 4px;
  border: none;
  padding: 8px 10px;
  color: white;

  margin-left: 1em;
  cursor: pointer;
}

.editor {
  display: grid;
  justify-items: end;
  margin-top: 2em;
}

#paste {
  margin-top: 1em;
}

textarea {
  border: 1px solid hsl(0deg, 0%, 90%);
  border-radius: 4px;
  padding: 8px;
}