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 相关文章推荐
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
js querySelector() 使用方法
Dec 21 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
jQuery实现日历效果
Sep 11 jQuery
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
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
Convert Seconds To Hours
2007/06/16 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
python中from module import * 的一个坑
2014/07/20 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
中国电视购物:快乐购
2017/02/04 全球购物
网络工程师的自我评价
2013/10/02 职场文书
质检员岗位职责
2013/12/17 职场文书
会计电算化专业毕业生自荐信
2013/12/20 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
授权委托书
2014/07/31 职场文书
新教师培训心得体会
2014/09/02 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
2016大学军训心得体会
2016/01/11 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python