前端模拟用户的复制操作

一、前言

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

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

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

选中文本：对应用户通过鼠标或者触屏选中文本的操作。

操作系统剪贴板：对应用户按下 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 对象，它主要用来自定义选区。对于这两个对象不了解的读者，可以查看文末给出的参考文献，接下来，利用 Selection 和 Range 对象实现上述 select() 方法：

  function select (element) {

    const selection = window.getSelection()

    const range = document.createRange()

    range.selectNodeContents(element)

    selection.removeAllRanges()

    selection.addRange(range)

  }

三、操作系统剪贴板

 document 暴露的 execCommand 方法，可以用来运行操作系统提供的命令，并且这些命令大部分作用于 Selection 对象。

  该方法返回的布尔值表示操作是否被支持或者是否被启用，但是调用一个命令之前，不能尝试使用返回值去校验浏览器的兼容性。

  function copyText () {

    let success = true

    try {

      success = document.execCommand('copy')

    } catch (e) {

      success = false

    }

    return success

  }

通过 execCommand 执行 copy 命令，可以将上述选中的文本添加到系统剪贴板中，接下来用户只需要在使用的地方按下 Ctrl（command） + V 即可粘贴该内容。

四、特殊情况的处理

上述方案基本上可以应对大部分的情况，但是在 HTML 中，部分元素中的文本是无法被选中的，例如：

  <select id="js-select">

    <option value="apple">apple</option>

    <option value="banana">banana</option>

    <option value="peach">peach</option>

  </select>

 既然 select 元素中的文本无法被选中，那么就无法调用 execCommand 方法，又何谈模拟用户复制该文本呢？

  这里就需要采用以下套路：

1、获取需要复制的文本

首先获取到需要复制的文本内容，对于 select 元素，其文本内容可以根据 value 属性获取：

  const element = document.getElementById('js-select')

  const text = element.value

2、创建透明元素

 前面提到的 input、textarea 等元素都是可以被选中的，所以这里笔者选择创建一个透明的 textarea 来实现接下来的功能：

  function createFakerElement (text) {

    const fakerElement = document.createElement('textarea')

    fakerElement.style.position = 'absolute'

    fakerElement.style.left = '-9999px'

    fakerElement.value = text

    document.body.appendChild(fakerElement)

    return fakerElement

  }

3、选中文本

 前面也提到选中文本有两种方式：

对于 input、textarea 元素，可以直接调用其 select 方法。

对于大多数元素（input 和 textarea 元素就是特例之一），可以通过 Selection 和 Range 完成选中文本的操作。

由于上述创建的是 textarea，这里直接调用 select 方法：

  function selectInput (element) {

    return element.select()

  }

4、操作系统剪贴板

前文已经提及，这里不再赘述。

  接下来只要按照顺序执行这些操作即可：

  document.getElementById('js-button').addEventListener('click', () => {

    const element = document.getElementById('js-select')

    // 1、获取需要的文本内容

    const text = element.value

    // 2、创建透明的 textarea 元素

    const fakerElement = createFakerElement(text)

    // 3、选中相应的文本

    selectInput(fakerElement)

    // 4、执行操作系统剪贴板的 copy 命令

    const success = copyText()

    if (success) {

      console.log('复制成功')

    } else {

      console.log('复制失败')

    }

    document.body.removeChild(fakerElement)

  }, false)

五、总结

 由上文可知，前端模拟用户的复制操作主要涉及两方面的知识：

利用 Selection 和 Range 对象完成文本选中操作，比较特殊的是 input 和 textarea 元素自带 select 方法实现该操作。

通过 document.execCommand 方法调用 copy 命令将内容保存到系统剪贴板中。

其中 document.execCommand 方法主要作用于 Selection 对象，所以当元素无法被选中时，该复制命令则无法达到预期的效果。

  前面也到了 disabled 属性以及 select 元素这样的特例，相比较下，通过创建一个透明的 textarea 来模拟复制操作的方案可用性更高。

六、参考文献

https://github.com/zenorocha/select

https://github.com/zenorocha/clipboard.js

https://developer.mozilla.org/zh-CN/docs/Web/API/Selection

https://developer.mozilla.org/zh-CN/docs/Web/API/Range

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

多年编程经验，今年1月整理了一批2019年最新WEB前端教学视频，不论是零基础想要学习前端还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流qun：296212562，即可免费获取，学习不怕从零开始，就怕从不开始。