Javascript复制内容到剪切版

最新推荐文章于 2024-05-30 11:10:40 发布

showbuger

最新推荐文章于 2024-05-30 11:10:40 发布

阅读量546

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/zulvyinggaitong/article/details/122810260

本文介绍如何在没有input或textarea的情况下，利用JavaScript实现文本复制功能，包括临时创建input元素并移除的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有 input 或 textarea 标签时

<input type="text" value="复制我">
 <button>点击复制</button>

 <script>
    const btn = document.querySelector('button');

    btn.addEventListener('click', () => {
      const input = document.querySelector('input');
      input.select();
      document.execCommand('copy');
      alert('复制成功');
    });
  </script>

没有 input 或者 textarea 标签时

由于这个 api 只能操作可编辑区域，所以当没有 input 或者 textarea 标签时，我们可以先在document.body中创建一个这样的标签，后面再移除。

  <button>点击复制</button>

  <script>
    const btn = document.querySelector('button');

    btn.addEventListener('click', () => {
      const ipt = document.createElement('input');
      document.body.appendChild(ipt);
      ipt.setAttribute('value', '听说你想复制我');
      ipt.select();
      document.execCommand('copy');
      alert(ipt.value);
      document.body.removeChild(ipt);
    });
  </script>