前端模拟用户的复制操作

一、前言

  用户在浏览网页的过程中，执行复制操作的场景是非常多的，例如：复制链接地址、复制分享文案等等。

  而前端通过模拟用户的复制操作，可以减少操作的步骤，进而优化用户体验。

  复制操作主要分为以下两部分：

• 选中文本：对应用户通过鼠标或者触屏选中文本的操作。
• 操作系统剪贴板：对应用户按下 Ctrl（command） + C 的操作。

二、选中文本

  首先，读者需要明白，不是所有的文本都可以被选中的（后续会提到），笔者这里先介绍几个可以选中文本的情况：

1、input 和 textarea

  由于 input 元素的工作方式因其类型属性的值而有很大的差异，所以这里只讨论 text 的情况。

  因为 JavaScript 提供了 HTTMLInputElement.select() 方法，所以选中 textarea 和 input 中的内容就变得非常简单：

  document.querySelector('input').select()

  如果 input 和 textarea 元素附加了 disabled 属性，那么其内容是无法被选中的，这种情况最好是将 disabled 替换为 readonly 。

2、div

  div 元素并没有开箱即用的 select() 方法，这就需要读者了解一个新的对象： Selection 。

  Selection 对象表示用户选择文本的范围以及光标的范围。关于 Selection 对象，读者需要了解以下几个术语：

• 锚点：选区的起始点。
• 焦点：选区的终止点。
• 范围：文档中连续的一部分。

  与 Selection 对象息息相关的还有一个 Range 对象，它主要用来自定