How to copy content to clipboard in JavaScript

 点我复制

import Clipboard from 'clipboard'; const btnCopy = new Clipboard('btn');

import Clipboard from 'clipboard'; const btnCopy = new Clipboard('btn'); this.copyValue = 'hello world';

Event

Sometimes we need to copy To do something, you need the support of callback 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); // 触发元素：比如：点我复制 e.clearSelection(); // 清除选中内容 }); // 复制失败后执行的回调函数 clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); });

##Summary

clipboard in a single page, in order to make life cycle management more elegant, remember tobtn.destroy() destroy it after use.

document.execCommand() method

MDN :

• aCommandName: Indicates the command name, such as: copy, cut, etc. (see commands for more commands);

• aShowDefaultUI: Whether to display the user interface , usually false;

• aValueArgument: Some commands require additional parameters, which are generally not used;

compatible Sex

Copy from the input box using

 点我复制

js code

const btn = document.querySelector('#btn'); btn.addEventListener('click', () => { const input = document.querySelector('#demoInput'); input.select(); if (document.execCommand('copy')) { document.execCommand('copy'); console.log('复制成功'); } })

Sometimes there is no

tag on the page, we may need to copy from a

content, or copy the variable directly. Remember in the definition of the

method that it can only operate on editable areas, which means that except for inputs like and This method cannot be used outside the domain. At this time we need to save the country.

Click me to copy

js code

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); })

It can be regarded as a success in saving the country through curves. When using this method, I encountered several pitfalls.

When debugging under Chrome, this method runs perfectly. Then when it came to debugging the mobile terminal, the pit came out.

Yes, that’s right, it’s you, ios. . .

Once you know what causes the jitter It's easier to solve. Since the keyboard is pulled up, the focus is on the input field. Then just make the input field unavailable for input. Add input.setAttribute('readonly', 'readonly'); to the code to make this read-only. Yes, it won't pull up the keyboard.

这个问题是由于 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); })