遇到的需求

一段数据，一个按钮
点击按钮复制数据并给出 toast 提示
实现的关键在于复制功能

通过execCommend('copy')实现

直接搜索出来的方法 具体实现大概是下面这个样子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 样式我就懒得放了 -->
<body>
  <div class="wrapper">
    <div class="text-box">复制这段文字吧</div>
    <button class="copy">复制上面的文字</button>
    <textarea class="test" placeholder="粘贴到这儿试试"></textarea>
  </div>
  <script>
    const btn = document.querySelector(".copy");
    const textBox = document.querySelector(".text-box");

    btn.addEventListener("click", function () {
      const text = textBox.innerText;
      // 方法 1
      const input = document.createElement("input");
      input.setAttribute("value", text);
      document.body.appendChild(input);
      input.select();
      document.execCommand("copy");
      document.body.removeChild(input);
    });
  </script>
</body>

创建一个 input 标签，修改其内容（value）,select 方法选中
然后执行document.execCommand('copy')复制
这个方法有个问题：
MDN–document.execCommand
这个 API 废弃了 不过还能用…
写代码还是规范点比较好，MDN 说废弃了那就是最好别用
而且这么一堆 DOM 操作总感觉心里发毛
既然 MDN 把这个方法废弃了 那肯定有别的方法

复制粘贴离不开剪切板这个东西
于是找到了clipboard

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
  <div class="wrapper">
    <div class="text-box">复制这段文字吧</div>
    <button class="copy">复制上面的文字</button>
    <textarea class="test" placeholder="粘贴到这儿试试"></textarea>
  </div>
  <script>
    const btn = document.querySelector(".copy");
    const textBox = document.querySelector(".text-box");

    btn.addEventListener("click", function () {
      const text = textBox.innerText;
      // 方法 2
      let copyPromise = navigator.clipboard.writeText(text);
      copyPromise
        .then(() => console.log("复制大成功"))
        .catch(() => console.log("复制大失败"));
    });
  </script>
</body>

不管是看起来还是用起来都舒服多了
至于 toast 提示的操作 放进.then 里就可以了，复制失败就 catch 一下

Codepen