每日 30 秒 ⏱ 复制内容到剪贴板

简介

剪贴板、复制、兼容

复制内容到剪贴板 是前端开发过程当中会常常遇到的一个需求，大部分同窗开发时每每会直接打开搜索框开始寻找别人写好的组件库，而聪明的同窗会开始思考问题：

• 产品的使用场景是什么？
• 是否须要兼容不少浏览器？
• 是否在项目中须要频繁使用？
• 是否须要使用第三方库额外提供的功能？

当产品使用场景并不大和复杂时，可使用这段 复制内容到剪贴板 代码：

// 该源码来自于 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