<p>Auf einer aktuellen Ereignisseite gibt es eine kleine Anforderung. Benutzer können den Inhalt durch Klicken oder langes Drücken in die Zwischenablage kopieren und den Implementierungsprozess und die aufgetretenen Fallstricke aufzeichnen.
Gemeinsame Methoden
<p>Ich habe das allmächtige Google überprüft. Die gängigen Methoden sind nun hauptsächlich die folgenden zwei:
- <p>Bibliotheken von Drittanbietern: clipboard.js
- <p>Native Methode: document.execCommand()
<p>Sehen wir uns an, wie diese beiden Methoden verwendet werden.
clipboard.js
<p>Dies ist die offizielle Website von Clipboard: https://clipboardjs.com/, es scheint so einfach zu sein.
Zitieren
<p> direktes Zitat:
<script src="dist/clipboard.min.js"></script>
<p> Paket:
npm install clipboard --save und dann
import Clipboard from 'clipboard';
verwenden Sie
aus der Eingabe Box Copy
<p> Jetzt gibt es ein
<input>-Tag auf der Seite. Wir müssen den darin enthaltenen Inhalt kopieren. Wir können Folgendes tun:
<input id="demoInput" value="hello world">
<button class="btn" data-clipboard-target="#demoInput">点我复制</button>
Nach dem Login kopieren
import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');Nach dem Login kopieren
<p> Beachten Sie, dass in der
<button>-Tag Ein
data-clipboard-target-Attribut wird hinzugefügt und sein Wert ist der
<input> des zu kopierenden
id. Wie der Name schon sagt, wird der Inhalt vom gesamten Tag kopiert.
Direkt kopieren
<p>Manchmal möchten wir den Inhalt nicht von
<input> kopieren, sondern den Wert einfach direkt aus der Variablen abrufen. Wenn wir dies in
Vue tun können:
<button class="btn" :data-clipboard-text="copyValue">点我复制</button>
Nach dem Login kopieren
import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
this.copyValue = 'hello world';Nach dem Login kopieren
Ereignis
<p>Manchmal müssen wir nach dem Kopieren etwas tun, dann benötigen wir die Unterstützung der Rückruffunktion.
<p>Fügen Sie den folgenden Code zur Verarbeitungsfunktion 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 class="btn" :data-clipboard-text="copyValue">点我复制</button>
e.clearSelection(); // 清除选中内容
});
// 复制失败后执行的回调函数
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});Nach dem Login kopieren
Zusammenfassung
<p>Das Dokument erwähnte auch, dass, wenn Sie
clipboard auf einer einzelnen Seite verwenden, um Um das Lebenszyklusmanagement eleganter zu gestalten, denken Sie daran, es nach Gebrauch
btn.destroy() zu zerstören.
<p>
clipboard Ist es nicht sehr einfach zu bedienen? Ist es jedoch nicht elegant genug, zusätzliche Bibliotheken von Drittanbietern nur für eine
copy-Funktion zu verwenden? Was sollten wir zu diesem Zeitpunkt tun? Verwenden Sie dann native Methoden, um dies zu erreichen.
document.execCommand()-Methode
<p> Schauen wir uns zunächst an, wie diese Methode auf
MDN definiert ist:
die es einem ermöglicht, Befehle auszuführen, um den Inhalt der zu manipulieren Bearbeitbarer Bereich.
<p> bedeutet, dass Sie Befehle ausführen können, um den Inhalt des bearbeitbaren Bereichs zu bearbeiten. Beachten Sie, dass es sich um den
bearbeitbaren Bereich handelt.
Definition
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
<p>Die Methode gibt einen
Boolean-Wert zurück, der angibt, ob der Vorgang erfolgreich war.
-
<p>
aCommandName: Stellt den Befehlsnamen dar, z. B.: copy, cut usw. (weitere Befehle finden Sie unter Befehle); > : Ob die Benutzeroberfläche angezeigt werden soll, normalerweise -
<p>
aShowDefaultUIfalse: Einige Befehle erfordern zusätzliche Parameter, die im Allgemeinen nicht verwendet werden; >
-
<p>Kompatibilität
aValueArgumentDie Kompatibilität dieser Methode war vorher nicht sehr gut, aber glücklicherweise ist sie mittlerweile grundsätzlich mit allen Mainstream-Browsern kompatibel und kann auch auf mobilen Endgeräten verwendet werden.
<p>
<p>Kopieren Sie das
aus dem Eingabefeld mit Jetzt gibt es ein
-Tag auf dem Seite, die wir möchten Um den Inhalt zu kopieren, können wir Folgendes tun:
<p>An anderer Stelle kopieren
<input>Manchmal gibt es kein
<input id="demoInput" value="hello world">
<button id="btn">点我复制</button>
Nach dem Login kopieren
-Tag auf der Seite, das müssen wir vielleicht tun Kopieren Sie es von einem
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
const input = document.querySelector('#demoInput');
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
console.log('复制成功');
}
})Nach dem Login kopieren
Kopieren Sie den Inhalt in , oder kopieren Sie die Variable direkt.
Denken Sie daran, dass in der Definition der <p>-Methode erwähnt wurde, dass sie nur im
<input>bearbeitbaren Bereich
<p> arbeiten kann, was bedeutet, dass mit Ausnahme von Eingabefeldern wie und <p> , diese Methode kann nicht verwendet werden.
execCommand()In dieser Zeit müssen wir das Land retten. <input><textarea>Es kann als Erfolg bei der Rettung des Landes durch eine Kurve gewertet werden. Bei der Verwendung dieser Methode traten mehrere Fallstricke auf. <p>Aufgetretene Fallstricke
<button id="btn">点我复制</button>
Nach dem Login kopieren
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);
})Nach dem Login kopieren
Beim Debuggen unter Chrome funktioniert diese Methode perfekt. Als es dann darum ging, das mobile Endgerät zu debuggen, kam die Grube zum Vorschein. <p>Ja, das stimmt, du bist es, ios. . .
<p>Wenn Sie auf „Kopieren“ klicken, erscheint am unteren Bildschirmrand ein weißes Flackern. Wenn Sie genau hinsehen, ziehen Sie die Tastatur hoch und legen sie sofort weg <p>Es wäre besser, wenn Sie wissen, was den Jitter verursacht. Da die Tastatur hochgezogen ist, liegt der Fokus auf dem Eingabefeld. Fügen Sie also einfach
zum Code hinzu, um dieses - schreibgeschützt zu machen, und die Tastatur wird nicht hochgezogen . <p>
<p>
input.setAttribute('readonly', 'readonly');Kann nicht kopiert werden <input>
<p>这个问题是由于 input.select() 在ios下并没有选中全部内容，我们需要使用另一个方法来选中内容，这个方法就是 input.setSelectionRange(0, input.value.length);。
<p>完整代码如下：
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);
})Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonJavaScript kopiert den Inhalt in den Implementierungscode der Zwischenablage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
