How to copy content to clipboard in JS

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.js

Native method:
document.execCommand()

Let’s take a look at how these two methods are used.

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 box

Now there is an <input> tag on the page, we need to copy the content inside it, we can do this:

<input>
<button>点我复制</button>

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

Notice that a

data-clipboard-target attribute is added to the tag, and its value is the <input> that needs to be copied. id, as the name suggests, copies the content from the entire tag.

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:

Click me to copy

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

event

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

Summary

The document also mentions that if

clipboard 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

:

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

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.

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

• aShowDefaultUI: Whether to display the user interface, usually false;
• <p></p>aValueArgument: Some commands require additional parameters, which are generally not used;
• <p></p>

compatibility

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

从输入框复制
现在页面上有一个 <input> 标签，我们想要复制其中的内容，我们可以这样做：

<input>
<button>点我复制</button>

js代码

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></p> 中复制内容，或者直接复制变量。

还记得在 execCommand() 方法的定义中提到，它只能操作可编辑区域，也就是意味着除了 <input>、 这样的输入域以外，是无法使用这个方法的。

这时候我们需要曲线救国。

点我复制

js代码

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

angularjs中获取单选按钮的方法

脚本加载后执行JS回调函数的方法

The above is the detailed content of How to copy content to clipboard in JS. For more information, please follow other related articles on the PHP Chinese website!