JavaScript复制内容到剪贴板

原文链接:https://github.com/axuebin/ar…

近来一个运动页面中有一个小需求,用户点击或许长按就能够复制内容到剪贴板,纪录一下完成历程和碰到的坑。

罕见要领

查了一下全能的Google,如今罕见的要领重要是以下两种:

  • 第三方库:clipboard.js
  • 原生要领:document.execCommand()

离别来看看这两种要领是怎样运用的。

clipboard.js

这是clipboard的官网:https://clipboardjs.com/,看起来就是这么的简朴。

援用

直接援用: <script src="dist/clipboard.min.js"></script>

包: npm install clipboard --save ,然后 import Clipboard from 'clipboard';

运用

从输入框复制

如今页面上有一个 <input> 标签,我们须要复制个中的内容,我们能够如许做:

<input id="demoInput" value="hello world">
<button class="btn" data-clipboard-target="#demoInput">点我复制</button>
import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');

注重到,在 <button> 标签中增加了一个 data-clipboard-target 属性,它的值是须要复制的 <input>id,望文生义是从全部标签中复制内容。

直接复制

有的时刻,我们并不愿望从 <input> 中复制内容,仅仅是直接从变量中取值。如果在 Vue 中我们能够如许做:

<button class="btn" :data-clipboard-text="copyValue">点我复制</button>
import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
this.copyValue = 'hello world';

事宜

有的时刻我们须要在复制后做一些事变,这时刻就须要回调函数的支撑。

在处置惩罚函数中到场以下代码:

// 复制胜利后实行的回调函数
clipboard.on('success', function(e) {
    console.info('Action:', e.action); // 行动称号,比方:Action: copy
    console.info('Text:', e.text); // 内容,比方:Text:hello word
    console.info('Trigger:', e.trigger); // 触发元素:比方:<button class="btn" :data-clipboard-text="copyValue">点我复制</button>
    e.clearSelection(); // 消灭选中内容
});

// 复制失利后实行的回调函数
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

小结

文档中还提到,如果在单页面中运用 clipboard ,为了使得生命周期治理越发的文雅,在运用完以后记得 btn.destroy() 烧毁一下。

clipboard 运用起来是不是是很简朴。然则,就为了一个 copy 功用就运用分外的第三方库是不是是不够文雅,这时刻该怎样办?那就用原生要领完成呗。

document.execCommand()要领

先看看这个要领在 MDN 上是怎样定义的:

which allows one to run commands to manipulate the contents of the editable region.

意义就是能够许可运转敕令来操纵可编辑地区的内容,注重,是可编辑地区

定义

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

要领返回一个 Boolean 值,示意操纵是不是胜利。

  • aCommandName :示意敕令称号,比方: copy, cut 等(更多敕令见敕令);
  • aShowDefaultUI:是不是展现用户界面,平常情况下都是 false
  • aValueArgument:有些敕令须要分外的参数,平常用不到;

兼容性

这个要领在之前的兼容性实际上是不太好的,然则幸亏如今已基础兼容一切主流浏览器了,在挪动端也能够运用。

《JavaScript复制内容到剪贴板》

运用

从输入框复制

如今页面上有一个 <input> 标签,我们想要复制个中的内容,我们能够如许做:

<input id="demoInput" value="hello world">
<button id="btn">点我复制</button>
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
    const input = document.querySelector('#demoInput');
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制胜利');
    }
})

别的处所复制

有的时刻页面上并没有 <input> 标签,我们能够须要从一个 <div> 中复制内容,或许直接复制变量。

还记得在 execCommand() 要领的定义中提到,它只能操纵可编辑地区,也就是意味着除了 <input><textarea> 如许的输入域之外,是没法运用这个要领的。

这时刻我们须要曲线救国。

<button id="btn">点我复制</button>
const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
    const input = document.createElement('input');
    document.body.appendChild(input);
     input.setAttribute('value', '据说你想复制我');
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制胜利');
    }
    document.body.removeChild(input);
})

算是曲线救国胜利了吧。在运用这个要领时,碰到了几个坑。

碰到的坑

在Chrome下调试的时刻,这个要领时圆满运转的。然后到了挪动端调试的时刻,坑就出来了。

对,没错,就是你,ios。。。

  1. 点击复制时屏幕下方会涌现白屏发抖,细致看是拉起键盘又霎时收起

    知道了发抖是因为什么发生的就比较好处理了。既然是拉起键盘,那就是聚焦到了输入域,那只要让输入域不可输入就好了,在代码中增加 input.setAttribute('readonly', 'readonly'); 使这个 <input> 是只读的,就不会拉起键盘了。

  2. 没法复制

    这个问题是因为 input.select() 在ios下并没有选中全部内容,我们须要运用另一个要领来选中内容,这个要领就是 input.setSelectionRange(0, input.value.length);

完全代码以下:

const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
    const input = document.createElement('input');
    input.setAttribute('readonly', 'readonly');
    input.setAttribute('value', 'hello world');
    document.body.appendChild(input);
    input.setSelectionRange(0, 9999);
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制胜利');
    }
    document.body.removeChild(input);
})

总结

以上就是关于JavaScript怎样完成复制内容到剪贴板,附上几个链接:

execCommand MDN

execCommand兼容性

clipboard.js

    原文作者:axuebin
    原文地址: https://segmentfault.com/a/1190000013412206
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞