JavaScript kopiert den Inhalt in den Implementierungscode der Zwischenablage-js-Tutorial-php.cn

<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); >
<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 JavaScript kopiert den Inhalt in den Implementierungscode der Zwischenablage

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

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