JavaScript复制内容到系统剪切板的实现

最近写一个多平台接入的代码,有个小需求,一键嵌入代码,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)




下面是自己写文章时候的,因为文章是过了N久之后写的,正好看了这个链接,所以也回忆下,Mark下,希望大家都养成及时写文章的习惯。

参考链接

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 由于种种原因,简书等第三方平台博客不再保证能够同步更新,欢迎移步 GitHub:https://github.co...
    萌面大道阅读 2,450评论 0 2
  • 写iOS 程序的时候往往需要很多第三方框架的支持,可以大大减少工作量,讲重点放在软件本身的逻辑实现上。 GitHu...
    iOS_大菜鸟阅读 845评论 1 2
  • 今晚流氓兔推荐的歌曲是《借我》,谢春花。一首淡淡的歌,一阵淡淡的情绪。以前看到谢春花这三个字,我是不想听她的歌的。...
    佐恬阅读 268评论 0 0
  • 微信红包自打出世以来就极其受欢迎,抢红包插件可谓红极一时.今天,我们重新谈谈抢红包插件的哪些事儿.本质上,抢红包插...
    涅槃1992阅读 111,361评论 41 184