js 复制字符串

时间：

分类：

js

字数：

382 字

时长：

大约需要 1 分钟

次数：

0 人阅读

移动端复制操作不像PC直接光标选中ctrl+c这么方便，经常会用到点击按钮直接复制字符串这种，比如各种中奖码，各种优惠链接等。实现方式如下：

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
const copy = (() => {
  let input = null;

  /*
    * @param string text 需要复制的字符串
    * @return boolean 复制成功返回 true, 复制失败返回 false
    */
  return (text) => {
    // 记录滚动条位置
    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    if (!input) {
      input = document.createElement('input');
      input.readOnly = 'readOnly';        // 防止ios聚焦触发键盘事件
      input.style.position = 'absolute';
      input.style.left = '-1000px';
      input.style.zIndex = '-1000';
      document.body.appendChild(input);
    }

    const textString = text.toString();
    input.value = textString;

    // 选择文本
    if (input.createTextRange) {
      // IE
      const range = input.createTextRange();
      range.collapse(true);
      range.moveStart('character', 0);
      range.moveEnd('character', textString.length);
      range.select();
    } else {
      // Firefox / Chrome
      input.setSelectionRange(0, textString.length);
      input.focus();
    }

    if (document.execCommand) {
      const ret = document.execCommand('copy');
      input.blur();
      // 还原位置
      document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
      return ret;
    }
    return false;
  };
})();

坑

复制操作很溜，然而有坑，比如说移动端复制

  1. ios safari 浏览器 copy 方法不能写到ajax回调等异步方法中，必须写到点击事件或其他交互事件里面，否则复制失败。而安卓 chrome 又支持异步方法中回调
  1. 兼容性

开源插件

这儿再介绍一款 github 开源的复制插件 clipboard.js

本文demo

example-copy.html

扫码查看

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-01-24/js-command-copy/

如果您觉得文章不错，可以点击文章中的广告支持一下！