JS 方法实现复制粘贴

背景

以前我们一涉及到复制粘贴功能,实现思路一般都是:

  • 创建一个 textarea 标签

  • 让这个 textarea 不可见(定位)

  • 给这个 textarea 赋值

  • 把这个 textarea 塞到页面中

  • 调用 textarea 的 select 方法

  • 调用 document.execCommand('copy')

  • 删除 textarea 标签

代码如下

javascript 复制代码
const legacyCopy = (value: string) => {
    const ta = document.createElement('textarea');
    ta.value = value ?? '';
    ta.style.position = 'absolute';
    ta.style.opacity = '0';
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    ta.remove();
  };

上面说的是以前的方式,前几天在看 vueuse 源码的时候,发现了一个复制粘贴的 api,是 navigation 上的 clipboard

writeText

navigation.clipboard.writeText 是一个异步方法,用来将特定的值复制起来,方便你去别的地方粘贴,具体的用法如下

html 复制代码
<body>
  <div>
    <button id="btn">复制</button>
    <input id="input" />
  </div>
  <script>
    const btn = document.getElementById('btn')
    const input = document.getElementById('input')
    let value = ''

    btn.onclick = async () => {
      await navigator.clipboard.writeText(value);
    }
    input.oninput = (e) => {
      value = e.target.value
    }
  </script>
</body>

就能实现复制,并且可以 ctrl + v 进行粘贴

readText

navigation.clipboard.writeText 是一个异步方法,用来粘贴你刚刚复制的值

html 复制代码
<body>
  <div>
    <button id="copy">复制</button>
    <input id="input" />
  </div>
  <div>
    <button id="paste">粘贴</button>
    <span id="span"></span>
  </div>
  <script>
    const copy = document.getElementById('copy')
    const paste = document.getElementById('paste')
    const input = document.getElementById('input')
    const span = document.getElementById('span')
    let value = ''

    copy.onclick = async () => {
      await navigator.clipboard.writeText(value);
    }
    paste.onclick = async () => {
      span.innerHTML = await navigator.clipboard.readText()
    }
    input.oninput = (e) => {
      value = e.target.value
    }
  </script>
</body>
相关推荐
三体世界2 分钟前
TCP传输控制层协议深入理解
linux·服务器·开发语言·网络·c++·网络协议·tcp/ip
aha-凯心12 分钟前
前端学习 vben 之 axios interceptors
前端·学习
随心点儿23 分钟前
使用python 将多个docx文件合并为一个word
开发语言·python·多个word合并为一个
不学无术の码农27 分钟前
《Effective Python》第十三章 测试与调试——使用 Mock 测试具有复杂依赖的代码
开发语言·python
熊出没29 分钟前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN29 分钟前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
tomcsdn3133 分钟前
SMTPman,smtp的端口号是多少全面解析配置
服务器·开发语言·php·smtp·邮件营销·域名邮箱·邮件服务器
此乃大忽悠35 分钟前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
EnigmaCoder37 分钟前
Java多线程:核心技术与实战指南
java·开发语言
用户990450177800943 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端