1分钟学会 2 个复制文本到剪贴板的方法

虽然用户自己可以选择文本进行内容的复制到剪贴板，但是有一些场景，我们需要通过一个按钮事件进行当前文本区域内容的复制，这个场景在日常中的需求还是比较常见的，你会怎么做呢？

一、大多人都在用的方法

你可能在用这个方法进行剪贴板的复制

创建一个文本框区域 textarea
然后将你希望复制的内容填充此文本框
接下来将文本框添加至页面
然后使用 select 方法进行文本框内容的选择
然后执行 copy 命令
最后移除 textarea 文本框

基于以上说明，示例代码如下：

function copyToClipboard(text){const textArea = document.createElement("textarea")textArea.value = textdocument.body.appendChild(textArea)textArea.focus()textArea.select()document.execCommand('copy')document.body.removeChild(textArea)
}

二、你可能不知道的新方法

你可以使用浏览器的新API——navigator.clipboard，一段代码就能实现简单的内容复制

function copyToClipboard(text){navigator.clipboard.writeText(text)
}

三、将两个方法整合一起

现在我们可以将新旧方法合在一起，避免新方法在旧的浏览器不能使用，我们需要进行浏览器兼容的适配，示例代码如下：

function copyToClipboard(text){if(navigator.clipboard){navigator.clipboard.writeText(text)return //codes below wont be executed}const textArea = document.createElement("textarea")textArea.value = textdocument.body.appendChild(textArea)textArea.focus()textArea.select()document.execCommand('copy')document.body.removeChild(textArea)
}

今天的文章就分享到这里，感谢你的阅读。

来源

网址：https://dev.to/0shuvo0/copy-text-to-clipboard-in-jstwo-ways-1pn1

作者：Shuvo

1分钟学会 2 个复制文本到剪贴板的方法相关推荐

Clipboard.js – 现代方式实现复制文本到剪贴板
复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...
如何实现复制文本到剪贴板？
效果展示: 前置准备: 添加触发复制的按钮添加被复制的文本步骤分解: 创建成功提示触发器选中复制文本按钮点击检查器标签点击触发器标签创建触发器配置成功提示触发器触发时机-无触发行为-弹 ...
clipboard使用总结（复制文本到剪贴板功能的JavaScript插件）
1. 概述 clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件.通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 clipboard.j ...
js复制文本到剪贴板_如何将输出文本从命令行复制到Windows剪贴板
js复制文本到剪贴板 If you're doing work at the command line on your Windows box, it's sometimes useful to co ...
js复制文本到剪贴板_如何将文本和图像固定到Windows 10的剪贴板历史记录
js复制文本到剪贴板 Windows 10 makes copy and paste more convenient with a feature called Clipboard history. ...
jQuery/Js复制文本到剪贴板
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...
移动端复制文本到剪贴板唤起微信安卓和ios兼容性
移动端复制文本到剪贴本然后唤起微信复制在安卓和ios的兼容性 <div class="fixedwxq" id="fixedwxq1"><im ...
React-Native如何复制文本到剪贴板
React-Native自带Clipboard API,使用Clipboard可以在iOS和Android的剪贴板中读写内容. 官方API里面只有复制到剪贴板和从剪贴板读取内容的两个方法: stati ...
js打开页面自动复制文本到剪贴板_浏览器剪贴板API的应用
剪贴板在生产力平台上有很高的使用频率.剪贴板API在主流的浏览器上也已经有了不错的支持率.基于前端技术的生产力工具就需要考虑接入这些的能力. 技术上可以实现的场景有: 在onpaste事件读取剪贴板内 ...

1分钟学会 2 个复制文本到剪贴板的方法

一、大多人都在用的方法

二、你可能不知道的新方法

三、将两个方法整合一起

1分钟学会 2 个复制文本到剪贴板的方法相关推荐

最新文章

热门文章