JavaScript kopiert den Inhalt in den Implementierungscode der Zwischenablage

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

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

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

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

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

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ätaValueArgument
  Die 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>

-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('复制成功');
    }
})

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>

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

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

相关推荐：

JS复制内容到剪切板的实例代码(兼容IE与火狐)_javascript技巧

jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板_jquery

JavaScript实现复制内容到粘贴板代码_javascript技巧

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!