欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

如何在JavaScript中将内容复制到剪贴板?

最编程 2024-02-15 08:40:40
...

最近写一个多平台接入的代码,有个小需求,一键嵌入代码,Mark一下实现过程和遇到的一些问题,大家共勉。


实现方式


搜索资料常见的就2种方式

1 第三方库:常用的是clipboard.js

2 原生方法:document.execCommand()


简介

1 其实支持这种需求的第方库不是很多,但是最最常用的就是clipboard.js

这是 官网 https://clipboardjs.com/

非常easy 这里就不在多做介绍

2 哈哈惊不惊喜,意不意外,JS竟然原生支持复制到剪切板功能,但是我搜索的资料的时候,很多答案给人的感觉就是JS原生不支持,让我有了JS真lower的感觉。

后来搜索文档发现有个document.execCommand()方法 MDN文档,我就尝试了几次,我这人就喜欢实践出真知,没有详细看文档,但这样也导致遇到了很多不是坑的坑,后边会列出????????。


方法介绍

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

返回一个Boolean值表示操作是否成功

aCommandName:表示命令名称,常见的就是copy

aShowDefaultUI:是否展示用户界面,一般都是false

aValueArgument:额外的参数,具体看文档吧,我没有使用过

书接上文,为啥之前我们(主要是我)没有搜索到document.execCommand的相关实现资料呢,因为这个方法兼容性不好,哈哈但是现在兼容性不错,主流浏览器和移动端基本都支持

有图有真相,具体的还可以参考兼容性


网络异常,图片无法展示
|

html 代码我项目用的是Vue的框架

网络异常,图片无法展示
|

JS

网络异常,图片无法展示
|

这是常见的复制输入框的内容。

bug 坑坑

那我如果复制其他标签的内容呢比方说p div span标签内容呢,或者直接赋值呢

这就是我上面说的不好好看文档定义的坑,(其实是咱看着英文就头晕,论会一门外语的重要性????????)


重点解释  坑


这就不贴定义了,直接说就是定义这个方法只适用可编辑区域。所以除了inout textarea标签其他标签是通通不行的,那咋办呢。


一个思路

就是写一个看不见的input,把需要复制的值赋给这个输入框

但是这里大家注意哦 不要把input 设置hidden属性,不要问为什么,因为血的教训????????

其实我的理解是因为hidden隐藏了,就没办法输入了,就不算可编辑区了


不显示的方法

1 JS创建input标签

const input=document.createElement('input');

document.body.appendChild(input);

input.setAttribute('value','听说你想复制我');

input.select();

2 CSS设置

定位等,自己尝试吧


iOS坑

又是iOS奇葩,在前端这块,我遇到的奇葩iOS文本比安卓多。


现象

1 点击复制屏幕下方会出现抖动,慢动作就是键盘弹起来又瞬间收回去

2 无法复制


原因

1 因为聚焦所以键盘被拉起了

2 input.select()在ios下没有选中全部内容


解决办法

1键盘失去焦点就行,只读 input.setAttribute('readonly', 'readonly')

2 设置选中内容就行, input.setSelectionRange(0, input.value.length)