So kopieren Sie Inhalte in die Zwischenablage in JS

Dieses Mal zeige ich Ihnen, wie Sie Inhalte mit JS in die Zwischenablage kopieren. Was sind die Vorsichtsmaßnahmen für das Kopieren von Inhalten in die Zwischenablage mit JS? Ein praktischer Fall. Stehen Sie auf und schauen Sie sich das an.

Gemeinsame Methoden

Nach der Überprüfung des allmächtigen Google sind die gängigen Methoden nun hauptsächlich die folgenden zwei:

Bibliothek eines Drittanbieters: clipboard.js
Native Methode: document.execCommand()

Schauen wir uns an, wie diese beiden Methoden verwendet werden.

clipboard.js

Dies ist die offizielle Website von Clipboard: https://clipboardjs.com/, es scheint so einfach zu sein.

Zitat

Direktes Zitat:

Paket: npm install clipboard --save , dann import Clipboard from 'clipboard';

Verwenden Sie

Aus dem Eingabefeld kopieren
Da sich nun ein <input>-Tag auf der Seite befindet, müssen wir den darin enthaltenen Inhalt kopieren. Wir können Folgendes tun:

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

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

Beachten Sie, dass dem Tag <button></button> ein data-clipboard-target -Attribut hinzugefügt wird und sein Wert der <input> des zu kopierenden id ist. Wie der Name schon sagt, wird der Inhalt vom gesamten Tag kopiert.

Direkt kopieren

Manchmal möchten wir den Inhalt nicht von <input> kopieren, sondern den Wert einfach direkt aus der Variablen abrufen. Wenn wir in Vue das tun könnten:

Zum Kopieren klicken

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

Veranstaltung

Manchmal müssen wir nach dem Kopieren etwas tun. In diesem Fall benötigen wir die Unterstützung der Rückruffunktion .

Fügen Sie der Verarbeitungsfunktion den folgenden Code hinzu:

// 复制成功后执行的回调函数
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);
});

Zusammenfassung

Das Dokument erwähnt auch, dass Sie bei der Verwendung von clipboard auf einer einzelnen Seite daran denken sollten, nach der Verwendung zu zerstören, um die Verwaltung des Lebenszyklus btn.destroy() eleganter zu gestalten.

Ist die Verwendung der Zwischenablage nicht sehr einfach? Ist es jedoch nicht elegant genug, zusätzliche Bibliotheken von Drittanbietern nur für eine Kopierfunktion zu verwenden? Was sollten wir jetzt tun? Verwenden Sie dann native Methoden, um dies zu erreichen.

document.execCommand()-Methode

Schauen wir uns zunächst an, wie diese Methode auf MDN definiert ist:

Dies ermöglicht die Ausführung von Befehlen zur Bearbeitung des Inhalts des bearbeitbaren Bereichs

Das bedeutet, dass Befehle ausgeführt werden können, um den Inhalt des bearbeitbaren Bereichs zu manipulieren. Beachten Sie, dass es sich um einen bearbeitbaren Bereich handelt.

Definition

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

Die Methode gibt einen booleschen Wert zurück, der angibt, ob der Vorgang erfolgreich war.

• aCommandName: Stellt den Befehlsnamen dar, z. B. „Kopieren“, „Ausschneiden“ usw. (weitere Befehle finden Sie unter „Befehle“). aShowDefaultUI: Gibt an, ob die Benutzeroberfläche angezeigt werden soll, normalerweise „false“; >

aValueArgument: Einige Befehle erfordern zusätzliche Parameter, die im Allgemeinen nicht verwendet werden
• <p></p>

• Kompatibilität

Eigentlich war die Kompatibilität dieser Methode früher nicht sehr gut, aber glücklicherweise ist sie mittlerweile grundsätzlich mit allen gängigen Browsern kompatibel und kann auch auf mobilen Endgeräten genutzt werden.

Verwenden Sie

从输入框复制
现在页面上有一个 <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回调函数的方法

Das obige ist der detaillierte Inhalt vonSo kopieren Sie Inhalte in die Zwischenablage in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!