JavaScript复制内容到剪贴板的两种常用方法


Posted in Javascript onFebruary 27, 2018

常见方法

查了一下万能的Google,现在常见的方法主要是以下两种:

第三方库:clipboard.js
原生方法:document.execCommand()

分别来看看这两种方法是如何使用的。

clipboard.js

这是clipboard的官网:https://clipboardjs.com/,看起来就是这么的简单。

引用

直接引用:

<script src="dist/clipboard.min.js"></script>

包: npm install clipboard --save ,然后 import Clipboard from 'clipboard';

使用

从输入框复制
现在页面上有一个 <input> 标签,我们需要复制其中的内容,我们可以这样做:

<input id="demoInput" value="hello world">
<button class="btn" data-clipboard-target="#demoInput">点我复制</button>
import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');

注意到,在 <button> 标签中添加了一个 data-clipboard-target 属性,它的值是需要复制的 <input>id,顾名思义是从整个标签中复制内容。

直接复制

有的时候,我们并不希望从 <input> 中复制内容,仅仅是直接从变量中取值。如果在 Vue 中我们可以这样做:

<button class="btn" :data-clipboard-text="copyValue">点我复制</button>

import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
this.copyValue = 'hello world';

事件

有的时候我们需要在复制后做一些事情,这时候就需要回调函数的支持。

在处理函数中加入以下代码:

// 复制成功后执行的回调函数
clipboard.on('success', function(e) {
 console.info('Action:', e.action); // 动作名称,比如:Action: copy
 console.info('Text:', e.text); // 内容,比如:Text:hello word
 console.info('Trigger:', e.trigger); // 触发元素:比如:<button class="btn" :data-clipboard-text="copyValue">点我复制</button>
 e.clearSelection(); // 清除选中内容
});

// 复制失败后执行的回调函数
clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
});

小结

文档中还提到,如果在单页面中使用 clipboard ,为了使得生命周期管理更加的优雅,在使用完之后记得 btn.destroy() 销毁一下。

clipboard 使用起来是不是很简单。但是,就为了一个 copy 功能就使用额外的第三方库是不是不够优雅,这时候该怎么办?那就用原生方法实现呗。

document.execCommand()方法

先看看这个方法在 MDN 上是怎么定义的:

which allows one to run commands to manipulate the contents of the editable region.

意思就是可以允许运行命令来操作可编辑区域的内容,注意,是可编辑区域。

定义

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

方法返回一个 Boolean 值,表示操作是否成功。

  • aCommandName :表示命令名称,比如: copy, cut 等(更多命令见命令);
  • aShowDefaultUI:是否展示用户界面,一般情况下都是 false;
  • aValueArgument:有些命令需要额外的参数,一般用不到;

兼容性

这个方法在之前的兼容性其实是不太好的,但是好在现在已经基本兼容所有主流浏览器了,在移动端也可以使用。

JavaScript复制内容到剪贴板的两种常用方法

使用

从输入框复制
现在页面上有一个 <input> 标签,我们想要复制其中的内容,我们可以这样做:

<input id="demoInput" value="hello world">
<button id="btn">点我复制</button>

js代码

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
	const input = document.querySelector('#demoInput');
	input.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
})

其它地方复制

有的时候页面上并没有 <input> 标签,我们可能需要从一个 <div> 中复制内容,或者直接复制变量。

还记得在 execCommand() 方法的定义中提到,它只能操作可编辑区域,也就是意味着除了 <input>、<textarea> 这样的输入域以外,是无法使用这个方法的。

这时候我们需要曲线救国。

<button id="btn">点我复制</button>

js代码

const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
	const input = document.createElement('input');
	document.body.appendChild(input);
 	input.setAttribute('value', '听说你想复制我');
	input.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
 document.body.removeChild(input);
})

算是曲线救国成功了吧。在使用这个方法时,遇到了几个坑。

遇到的坑

在Chrome下调试的时候,这个方法时完美运行的。然后到了移动端调试的时候,坑就出来了。

对,没错,就是你,ios。。。

1、点击复制时屏幕下方会出现白屏抖动,仔细看是拉起键盘又瞬间收起

知道了抖动是由于什么产生的就比较好解决了。既然是拉起键盘,那就是聚焦到了输入域,那只要让输入域不可输入就好了,在代码中添加 input.setAttribute('readonly', 'readonly'); 使这个 <input> 是只读的,就不会拉起键盘了。

2、无法复制

这个问题是由于 input.select() 在ios下并没有选中全部内容,我们需要使用另一个方法来选中内容,这个方法就是 input.setSelectionRange(0, input.value.length);。

完整代码如下:

const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
	const input = document.createElement('input');
 input.setAttribute('readonly', 'readonly');
 input.setAttribute('value', 'hello world');
 document.body.appendChild(input);
	input.setSelectionRange(0, 9999);
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
 document.body.removeChild(input);
})

总结

以上就是关于JavaScript如何实现复制内容到剪贴板,附上几个链接:

execCommand MDN

execCommand兼容性

clipboard.js

Javascript 相关文章推荐
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
原生js实现五子棋游戏
May 28 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
Vue中this.$router.push参数获取方法
Feb 27 #Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 #Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 #Javascript
angular json对象push到数组中的方法
Feb 27 #Javascript
angularjs实现table增加tr的方法
Feb 27 #Javascript
关于redux-saga中take使用方法详解
Feb 27 #Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 #Javascript
You might like
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
简单的JS多重继承示例
2008/03/13 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
Python数据类型详解(一)字符串
2016/05/08 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Python单元和文档测试实例详解
2019/04/11 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
MySQL通过binlog恢复数据
2021/05/27 MySQL
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript