js复制html到粘贴板,JS点击按钮复制内容到粘贴板中

叁歲伎倆 2022-10-11 03:53 471阅读 0赞

写在前面

有时候，我们文章中有一段经典代码或者精彩内容，可能会被人复制引用，如果用鼠标选择，非常不友好，尤其是移动端。这时候我们可以给该内容添加点击事件，比如双击复制到粘贴板。下面我们来具体说一下实现方法(默认安装了jQuey)。

方案介绍

我看了很多网上的文章，目前有2种方案。

js原生方法：document.execCommand()

第三方库：clipboard.js

下面来分别介绍这两种方法的内容

js原生方法

第一种是使用js原生方法：document.execCommand()。这个方法在之前的兼容性其实是不太好的，但是好在现在已经基本兼容所有主流浏览器了，在移动端也可以使用(自测ios企业微信中无法复制，建议使用第二种方法)。

![046a06eb745a][]

execCommand兼容性

定义

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

参数说明

方法返回一个 Boolean 值，如果命令不受支持或禁用，则为false。

aCommandName ：命令名称，例如： copy，更多命令查看execCommand官方说明；

aShowDefaultUI：是否展示用户界面，一般情况下都是 false；

aValueArgument：对于需要输入参数的命令，是提供该信息的DOMString。

举例说明

复制内容：

复制

...

$(document).ready(function()\{

$('\#copybtn').bind('click',function () \{

const input = document.querySelector('\#copy');

input.select();

if (document.execCommand('copy')) \{

document.execCommand('copy');

console.log('复制成功');

\} else \{

console.log('复制失败');

\}

\});

\});

第三方库clipboard.js

clipboard的使用非常简单，下面举例来说一下，更多内容可以查看clipboard官网。

引入clipboard.js库文件

可以把该库文件下载在本地再引用，本文直接引用clipboard官网的CDN

HTML和逻辑代码

复制内容：

复制

...

$(document).ready(function()\{

var clipboard = new ClipboardJS('\#btnCopyLink'); // 点击按钮复制到粘贴板

clipboard.on('success', function(e) \{ // 复制成功后运行函数

console.log('复制成功！');

e.clearSelection();

\});

\});

[046a06eb745a]: /images/20221005/ebefed27f6f54234ab899f668036bdd7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，471人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 点击按钮复制指定内容到剪切板，复制变量值到剪切板

1.安装插件 npm install --save vue-clipboard2 或 cnpm install --save vue-clipboard2

红太狼/ 2023年06月27日 05:58/ 0 赞/ 32 阅读

相关 js复制文本到粘贴板（Clipboard.writeText()）

前言 js如何复制文本到粘贴板呢，网上所说的各种复制。。在Chrome或者说在我这个项目都没用。 windows.copy document.execCom

阳光穿透心脏的1/2处/ 2023年06月13日 04:47/ 0 赞/ 133 阅读

相关 JavaScript复制文本到粘贴板

JavaScript复制文本到粘贴板 function copyText(text) { var textarea = document

ゝ一纸荒年。/ 2023年06月12日 11:06/ 0 赞/ 31 阅读

相关 js点击复制到粘贴版

[下载插件][Link 1] 下载后在文件中找到这个文件并将文件放到项目目录中：dist/clipboard.min.js html代码 <div class

红太狼/ 2023年03月01日 03:26/ 0 赞/ 22 阅读

相关 vue clipboard 复制到粘贴板功能

import Clipboard from 'clipboard'; //复制到粘贴板 function handleClipboard(text: s

太过爱你忘了你带给我的痛/ 2023年02月25日 16:19/ 0 赞/ 458 阅读

相关 vue 实现点击复制指定内容到粘贴板

纯前端需求，要求点击 “复制” 按钮把输入框或者指定的文本复制到粘贴板。vue 有专门的插件来实现这个功能：[vue-clipboard2][]、[clipboard][]

女爷i/ 2023年01月05日 03:59/ 0 赞/ 496 阅读

相关 js复制html到粘贴板,JS点击按钮复制内容到粘贴板中

写在前面有时候，我们文章中有一段经典代码或者精彩内容，可能会被人复制引用，如果用鼠标选择，非常不友好，尤其是移动端。这时候我们可以给该内容添加点击事件，比如双击复制到粘贴板

叁歲伎倆/ 2022年10月11日 03:53/ 0 赞/ 472 阅读

相关 ios下js复制到粘贴板,在iOS中使用Javascript复制到剪贴板

![Image 1][] I'm using this function to copy a URL to the clipboard: function CopyUrl(

￡神魔★判官ぃ/ 2022年08月30日 11:13/ 0 赞/ 474 阅读

相关 vue 点击按钮复制指定内容到剪切板，复制变量值到剪切板

1.安装插件 npm install --save vue-clipboard2 或者 cnpm install --save vue-clipboard

深藏阁楼爱情的钟/ 2022年01月28日 08:36/ 0 赞/ 614 阅读

相关 JavaScript 原生js实现点击按钮复制内容到剪切板

效果图 ![点击按钮复制内容][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

àì夳堔傛蜴生んèń/ 2021年09月21日 13:06/ 0 赞/ 635 阅读