webapp实现点击按钮copy（复制）内容的功能

发表于 分类于 阅读次数：

准备一个textarea(基于vuejs)

1
<textarea v-model='videoUrl' id='copy' style="position:absolute;top:-99999999px"></textarea>

实现代码逻辑如下

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
function copy() {
  if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //区分iPhone设备
    console.log('ios')

    window.getSelection().removeAllRanges(); //这段代码必须放在前面否则无效

    var copyNode = document.getElementById("copy"); //要复制文字的节点
    var editable = copyNode.contentEditable;
    var readOnly = copyNode.readOnly;
    copyNode.contentEditable = true;
    copyNode.readOnly = true;

    var range = document.createRange();
    // 选中需要复制的节点
    range.selectNodeContents(copyNode);

    // 执行选中元素
    var selection = window.getSelection();
    if (selection.rangeCount > 0) {
      selection.removeAllRanges();
    }

    selection.addRange(range);
    copyNode.setSelectionRange(0, 999999);
    copyNode.contentEditable = editable;
    copyNode.readOnly = readOnly;

    // 执行 copy 操作
    var successful = document.execCommand('copy');

    console.log('successful = ', successful);
    // alert(successful)
    if (successful) {
      layer.open({
        content: '复制成功^_^',
        btn: ['好的'],
        yes: function (index) {
          layer.closeAll();
        }
      })
    }
    // 移除选中的元素
    window.getSelection().removeAllRanges();
  } else {
    var text = document.getElementById("copy").value;
    const textarea = document.createElement("textarea");
    textarea.style.position = 'fixed';
    textarea.style.top = 0;
    textarea.style.left = 0;
    textarea.style.border = 'none';
    textarea.style.outline = 'none';
    textarea.style.resize = 'none';
    textarea.style.fontSize = '12pt';
    textarea.style.background = 'transparent';
    textarea.style.color = 'transparent';
    textarea.value = text; // 修改文本框的内容
    document.body.appendChild(textarea);
    textarea.select() // 选中文本
    try {
      const msg = document.execCommand('copy') ?
        'successful' : 'unsuccessful';
      // alert(msg)
      if (msg == 'successful') {
        layer.open({
          content: '复制成功^_^',
          btn: ['好的'],
          yes: function (index) {
            layer.closeAll();
          }
        })
      }
    } catch (err) { alert('unable to copy', err) }
    document.body.removeChild(textarea)
  }

}