Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > How to copy content to clipboard in JavaScript

How to copy content to clipboard in JavaScript

亚连
Release： 2018-06-04 10:48:55
Original
2196 people have browsed it
<p>There is a small requirement in a recent event page. Users can click or long-press to copy the content to the clipboard and record the implementation process and pitfalls encountered. Friends who need it can refer to it

<p>Common methods

<p> After checking the almighty Google, the common methods are mainly the following two:

<p>Third-party library: clipboard.js
Native method: document. execCommand()

<p>Let’s see how these two methods are used.

<p>clipboard.js

<p>This is the official website of clipboard: https://clipboardjs.com/, it seems so simple.

<p>Quote

<p>Direct quote: 

<script src="dist/clipboard.min.js"></script>
Copy after login
<p>Package: npm install clipboard --save , then import Clipboard from 'clipboard';

<p>Use

<p>Copy from the input box
Now there is an <input> tag on the page, we need to copy it Content, we can do this: 

<input id="demoInput" value="hello world">
<button class="btn" data-clipboard-target="#demoInput">点我复制</button>
Copy after login
<p>

import Clipboard from &#39;clipboard&#39;;
const btnCopy = new Clipboard(&#39;btn&#39;);
Copy after login
<p>

<p>Notice that in <button> A data-clipboard-target attribute is added to the tag. Its value is the id of the <input> that needs to be copied. As the name suggests, it is from Copy content throughout the tag.

<p>Direct copy

<p>Sometimes, we don’t want to copy the content from <input>, but just get the value directly from the variable. If we can do this in Vue: 

<button class="btn" :data-clipboard-text="copyValue">点我复制</button>
Copy after login

import Clipboard from &#39;clipboard&#39;;
const btnCopy = new Clipboard(&#39;btn&#39;);
this.copyValue = 'hello world';
Copy after login
<p>

<p>Event

<p>Sometimes we need to copy To do something, you need the support of callback function.

<p>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);
});
Copy after login
<p>

<p>##Summary

The document also mentions Yes, if you use <p>clipboard in a single page, in order to make life cycle management more elegant, remember to btn.destroy() destroy it after use.

clipboard is 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. <p>

<p>document.execCommand() method

Let’s first look at how this method is defined on <p>MDN:

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

means that you can allow one to run commands to manipulate the contents of the editable region. Note that it is an editable region. <p>

Definition<p>

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)<p>

The method returns a Boolean value indicating whether the operation was successful. <p>

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

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

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

<p> compatible Sex

The compatibility of this method was not very good before, but fortunately it is now basically compatible with all mainstream browsers and can also be used on mobile terminals. <p>

<p>

<p>Copy from the input box using

##Now there is an <input> tag on the page that we want to copy For the content, we can do this: <p>

<input id="demoInput" value="hello world">
<button id="btn">点我复制</button>
Copy after login

<p>js code

<p>

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

<p>

Copy elsewhere<p>Sometimes there is no

<p> tag on the page, we may need to copy from a <p> content, or copy the variable directly. Remember in the definition of the

execCommand() <p> method that it can only operate on editable areas, which means that except for inputs like <input> and