简介
剪贴板、复制、兼容
复制内容到剪贴板 是前端开发过程中会经常遇到的一个需求，大部分同学开发时往往会直接打开搜索框开始寻找别人写好的组件库，而聪明的同学会开始思考问题：
产品的使用场景是什么？
是否需要兼容很多浏览器？
是否在项目中需要频繁使用？
是否需要使用第三方库额外提供的功能？
当产品使用场景并不大和复杂时，可以使用这段 复制内容到剪贴板 代码：
// 该源码来自于 https://30secondsofcode.org
const copyToClipboard = str => {
const el = document.createElement("textarea");
el.value = str;
el.setAttribute("readonly", "");
el.style.position = "absolute";
el.style.left = "-9999px";
document.body.appendChild(el);
const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
el.select();
document.execCommand("copy");
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
};
代码分析
浏览器提供了一个原生方法 document.execCommand("copy") 来实现 复制内容到剪贴板，但是它有一个使用前提“需要选择文本框或者输入框时”，所以先创建一个 textarea 文本框并通过定位让它不显示在屏幕里：
const el = document.createElement("textarea");
el.value = str;
el.style.position = "absolute";
el.style.left = "-9999px";
document.body.appendChild(el);
对创建好的 textarea 元素进行选中并使用复制里面的文本内容，最后移除掉 textarea 元素。
el.select();
document.execCommand("copy");
document.body.removeChild(el);
为什么跳过了一大段代码了？
其实到此为止就已经实现好了 复制内容到剪贴板，跳过代码分别是对两个场景的优化，可以根据产品开发的场景来选着是否使用这两段代码：
场景是否包括移动设备
是否页面可以让用户选中文本
移动设备优化移动设备上有一个问题 “当文本框被选中时，会弹出虚拟键盘” 会导致页面出现闪烁，如果手机响应较慢甚至可以看到虚拟键盘弹出和消失的过程。这段代码的点睛之笔之一在于把输入框设置为只读：
el.setAttribute("readonly", "");
小技巧：利用只读属性来防止弹出虚拟键盘。可选中文本优化
代码的另外一处点睛之笔在于：如果用户选中了某段文字后点击复制内容到剪贴板的复制操作这段选中的文字就会消失掉，肥肥的大拇指在手机屏幕像选着文本内容一直是一件挺让人不舒服的操作，选中文字的消失十分影响用户体验。
我们可以利用 document.getSelection 一系列光标选中 API 来帮助我们先记录下用户之前所选的文字对象：
const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
再进行完复制操作后对 selected 进行判断，并恢复先前记录下用户之前所选的文字对象：
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
一起成长
在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。
如果您想让更多人看到文章可以点个 点赞。
如果您想激励小二可以到 Github 给个 小星星。
如果您想与小二更多交流添加微信 m353839115。
本文原稿来自 PushMeTop
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102548.html
摘要：解决办法添加复制内容到剪贴板一行右侧第一个元素有双边距一行左侧第一个元素有双边距在，下，自身没浮动，但是的内容有浮动，下边就会产生一个间隙解决办法给加浮动给加注意当下最小高度问题，和的间隙问题共存的时候，给加浮动才能解决。目前主流浏览器的兼容性做的都比较好了，本文主要针对IE6，7的不兼容问题进行解决。 1.圆盘时钟有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高，IE6下...
摘要：功能齐全支持考勤会议管理云盘等，适用于企业协同办公支付工具库，轻松完成支付模块开发。包含训练好的模型和微服务，启动后可直接通过接口调用基于图像识别的自动化框架，支持吃鸡类射击类类等游戏类型。 .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidd...
简介 数组、CSV、表格、工具 showImg(https://segmentfault.com/img/bVbp3L5?w=900&h=500); 我们之前的两期 数组转 CSV 表格数据 和 JSON 对象数组转换 CSV 表格数据 中学习了转化为 CSV 表格数据的代码片段，今天就讲讲 如何把 CSV 表格数据转换为 JSON 对象： // 该源码来自于 https://30secondso...
showImg(https://segmentfault.com/img/remote/1460000018771130?w=900&h=500); 简介 分页、优化、可视区域、无限加载 写前端页面时最经常遇到的开发需求之一就是 渲染后端数据返回的数据对象，当数据对象数量极多的时候便需要进行分页。 常见的分页方式有三种： 在页面底部生成 上一页、下一页、页面列表 按钮。 用户可以很直接的选择...
showImg(https://segmentfault.com/img/remote/1460000018793640?w=900&h=500); 简介 安全、注入攻击、XSS 13岁女学生被捕：因发布 JavaScript 无限循环代码。 这条新闻是来自 2019年3月10日 很多同学匆匆一瞥便滑动屏幕去看下一条消息了，并没有去了解这段代码是什么，怎么办才能防止这个问题。事情发生后为了抗议日本...
阅读 1245·2023-04-25 15:50
阅读 1088·2021-09-22 15:49
阅读 2687·2021-09-22 15:06
阅读 3269·2019-08-30 15:54
阅读 2154·2019-08-29 11:33
阅读 1996·2019-08-23 17:56
阅读 1953·2019-08-23 17:06
阅读 1186·2019-08-23 15:55
