原文链接: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
:有些敕令须要分外的参数,平常用不到;
兼容性
这个要领在之前的兼容性实际上是不太好的,然则幸亏如今已基础兼容一切主流浏览器了,在挪动端也能够运用。
运用
从输入框复制
如今页面上有一个 <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。。。
- 点击复制时屏幕下方会涌现白屏发抖,细致看是拉起键盘又霎时收起
知道了发抖是因为什么发生的就比较好处理了。既然是拉起键盘,那就是聚焦到了输入域,那只要让输入域不可输入就好了,在代码中增加
input.setAttribute('readonly', 'readonly');
使这个<input>
是只读的,就不会拉起键盘了。 - 没法复制
这个问题是因为
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怎样完成复制内容到剪贴板,附上几个链接: