网页中如何实现点击按钮将文本复制到剪贴板?

boyanx3个月前技术教程26

构建网站时经常会用到将文本复制到剪贴板的需求,下面是常用做法,兼容旧版浏览器。

  1. 创建<input>元素,将其值设置为要复制到剪贴板上的字符串。
  2. 将<input>元素附加到当前 HTML 文档并使用 CSS 将其隐藏以防止闪烁。
  3. 使用InputElement.select()选择<input>元素的内容。
  4. 使用Document.execCommand('copy') 将 <input>的内容复制到剪贴板。
  5. 从文档中删除<input>元素。

Javascript 代码:

const copyToClipboard = str => {
  const el = document.createElement('input');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

document.execCommand - Web API 接口参考 | MDN

如果要实现其它高级功能,可以使用现代浏览器的 Clipboard - Web API 接口参考 | MDN

使用
navigator.clipboard.writeText 写入文本至操作系统剪贴板

const copyToClipboard = str => {
  if (navigator && navigator.clipboard && navigator.clipboard.writeText)
    return navigator.clipboard.writeText(str);
  return Promise.reject('The Clipboard API is not available.');
};
标签: js复制功能

相关文章

付费文库内容无法复制,不用任何工具,学会这4种方法轻松复制

关注职场办公,分享实用干货,洞察科技资讯,这里是「职场科技范」。我们在搜索资料的时候,看到非常有用的文库,但往往都是付费的,只能看不能复制。今天就来教大家,学会下面这4种方法,轻松复制文库内容。一、内...

轻松解除网页被限制复制功能_如何破解网页粘贴限制

当你想复制网页上的内容时发现鼠标不能选中文字,点击鼠标右键菜单也没有弹出来。不是你的鼠标坏了,是网页使用了一点“魔法”,限制你这么做。那我们就用魔法打败魔法,解除它的限制功能。方法一:很简单,只需要在...

如何复制收费网页上的文字?给你介绍4种快捷有效的方法

知识付费时代,网络上各种文档都需要花钱才能下载,你是不是也经常为此苦恼?现在我给大家介绍4种快捷有效、免费复制方法,为便于区分,我给它们各自命了一个名。(一)复制拖动法(适合电脑上操作)1. 新建一个...

我会在每个项目中复制这10个JS代码片段

你是否也有这种感觉:在搭建新项目时,你会想:"这个函数我是不是已经写过了...在某个地方?"是的——我也是。所以在开发了数十个React、Node和全栈应用后,我不再重复造轮子。我创建...

网页禁止复制文本内容,一招轻松搞定

在我们日常工作中,经常会遇到想从某个网页复制文字内容,被提示需要充值会员的情况。大家平时遇到这种情况是不是束手无策了,其实我们可以一招轻松搞定,下面我就图文并茂地给大家介绍一下方法。(欢迎关注,学更多...

教你免费下载付费文档,不限次数不用任何工具,全网资料任意复制

我们在搜索资料的时候会看到一些非常有用的资料,但往往这些资料都是付费资料。只能看一部分,不能直接复制下来。如果要直接下载,那只能付费下载。今天就教大家一个方法,可以免费复制付费文档资料。一分钟学会,看...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。