This time I will show you how to copy content to the clipboard with JS. What are the precautions for copying content to the clipboard with JS? The following is a practical case. Get up and take a look.
Common methods
After checking the all-powerful Google, the common methods now are mainly the following two: Third-party library: clipboard.jsNative method:
document.execCommand()
clipboard.js
This is the official website of clipboard:https://clipboardjs.com/, it seems so simple.
Quote
Direct quote:Package:
npm install clipboard --save , then import Clipboard from 'clipboard';
use
Copy from input boxNow there is an <input> tag on the page, we need to copy the content inside it, we can do this:
<input id="demoInput" value="hello world"> <button class="btn" data-clipboard-target="#demoInput">点我复制</button>
import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');data-clipboard-target attribute is added to the
Copy directly
Sometimes, we don't want to copy the content from <input>, but just get the value directly from the variable. If in Vue we could do this:import Clipboard from 'clipboard'; const btnCopy = new Clipboard('btn'); this.copyValue = 'hello world';Copy after login
event
Sometimes we need to do something after copying, in which case we need the support ofcallback function.
Add the following code to the processing function:// 复制成功后执行的回调函数
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);
});Summary
The document also mentions that ifclipboard is used in a single page, in order to make lifecycle management more elegant, remember btn.destroy() ## after use. #Destroy it.
Isn’t clipboard very simple to use? However, is it not elegant enough to use additional third-party libraries just for a copy function? What should we do at this time? Then use native methods to achieve it.
document.execCommand() method
Let’s first look at how this method is defined on
MDN:
This means that commands can be run to manipulate the contents of the editable area. Note that it is an editable area.
Definition
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
The method returns a Boolean value indicating whether the operation was successful.
The compatibility of this method was actually not very good before, but fortunately it is now basically compatible with all mainstream browsers and can also be used on mobile terminals.
use
从输入框复制
js代码
其它地方复制
有的时候页面上并没有
还记得在
现在页面上有一个 <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> 标签，我们可能需要从一个 <p> 中复制内容，或者直接复制变量。execCommand() 方法的定义中提到，它只能操作可编辑区域，也就是意味着除了 <input>、