JS-Implementierung des Beispielcode-Sharings zum Einfügen in die Zwischenablage

In diesem Artikel wird hauptsächlich der JS-Beispielcode zum Einfügen in die Zwischenablage vorgestellt. Derzeit gibt es zwei gängige Methoden zum Einfügen in die Zwischenablage.

Bibliothekszwischenablage eines Drittanbieters
Native JS, hauptsächlich die document.execCommand-Methode
Die erste Methode besteht darin, den Daten-Zwischenablagetext oder die Daten-Zwischenablage des Triggerelements festzulegen Laut Dokumentation. Nur Ziel, keine Erklärung, Einzelheiten finden Sie im Dokument

Die zweite Methode:
document.execCommand

Die Kompatibilität dieser Methode ist eigentlich nicht sehr gut Gut, insbesondere für mobile Endgeräte, aber bei einigen Modellen gibt es auch Probleme mit der Zwischenablage. Bevor Sie diese Methode verwenden, müssen Sie zunächst prüfen, ob der Browser bool = document.execCommand(') unterstützt. copy')

MDN Ja Die Erklärung der obigen Methode lautet wie folgt:

Wenn ein HTML-Dokument in den Designmodus designMode wechselt, stellt das Dokumentobjekt die execCommand-Methode bereit, die das Ausführen von Befehlen ermöglicht Bearbeiten Sie den Inhalt des bearbeitbaren Bereichs.

Achten Sie auf den fett gedruckten Teil, den Entwurfsmodus. Das heißt: Vor der Verwendung müssen wir den Dokumentmodus in den Entwurfsmodus umschalten.

document.designMode = 'on'

Nach Abschluss des Ausführungsbefehls legen Sie den Wert fest auf aus
Es gibt einen weiteren fett gedruckten Teil, einen bearbeitbaren Bereich, Standardeingabe- und Textbereichselemente, die bearbeitet werden können (die Einstellung von contenteditable="true" eines Elements kann auch den Bearbeitungsmodus des Elements aktivieren)

Sehen wir uns zunächst an, wie um Formularelemente zu implementieren

ele.addEventListener('click', () => {    document.designMode = 'on'
    let bool = document.execCommand('copy')    if (!bool) {
        alert('sorry, 手动复制吧')
    } else {        let val = 'something'
        let inputEle = document.createElement('input')        document.body.appendChild(inputEle)
        inputEle.setAttribute('value', val)
        inputEle.setAttribute('readonly', 'readonly')
        inputEle.select()        document.execCommand('copy')        document.body.removeChild(inputEle)
        alert('copied')
    }    document.designMode = 'off'})

Um den Cursor zu vermeiden oder die Eingabemethode aufzurufen, müssen Sie das schreibgeschützte Attribut für das Element festlegen

Die Methode inputEle.select() manchmal In einigen Browsern können nicht alle Inhalte ausgewählt werden. In diesem Fall müssen Sie die setSelectionRange-Methode von inputeElement verwenden: Die Methode

HTMLInputElement.setSelectionRange kann einen bestimmten Inhaltsbereich aus einem fokussierten
-Element auswählen.

Zusammenfassend zwei Zeilen hinzufügen:

...inputEle.focus()
inputEle.setSelectionRange(0, inputEle.value.length)
document.execCommand('copy')...

Wenn es sich nicht um ein Formularelement wie eine Eingabe handelt und select und setSelectRange nicht verwendet werden können, können wir zur Simulation die Methoden getSelection und createRange verwenden Dieser Prozess, Auswahl Das Objekt stellt den vom Benutzer ausgewählten Textbereich oder die aktuelle Position des Cursors dar, der den bearbeitbaren Aktivitätsbereich zum Ausführen des execComman-Befehls wie folgt erfüllt

let range = document.createRange()let tar = document.querySelector('#code')
range.selectNodeContents(tar)let selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)document.execCommand('copy')
selection.removeAllRanges()

Das Obige kann auch sein implementiert für Nicht-Eingabe-, Textbereichs- und andere Formularelemente
Originaltext-Link: segmentfault.com
Ausführlicher Artikel: https://github.com/axuebin/articles/issues/26

Es gibt Derzeit gibt es zwei gängige Methoden zum Einfügen in die Zwischenablage:

Zwischenablage der Bibliothek eines Drittanbieters
Native JS, hauptsächlich die document.execCommand-Methode
Die erste Methode besteht darin, den Anweisungen des Dokuments zu folgen und die Daten festzulegen. Clipboard-Text oder Data-Clipboard-Target des Triggerelements. Anweisungen finden Sie im Dokument

Die zweite Methode:
document.execCommand

Die Kompatibilität Diese Methode ist eigentlich nicht sehr gut, insbesondere für mobile Endgeräte. Die Details finden Sie hier, aber bei einigen Modellen gibt es auch Probleme. Daher hängt die spezifische Verwendung von der Situation ab. Bevor Sie diese Methode verwenden, müssen Sie zunächst prüfen, ob die Browser unterstützt bool = document.execCommand('copy')

MDNs Erklärung der obigen Methode lautet wie folgt:

Wenn ein HTML-Dokument in den DesignMode wechselt, macht das Dokumentobjekt die execCommand-Methode verfügbar. Dadurch können Befehle ausgeführt werden, um den Inhalt des bearbeitbaren Bereichs zu manipulieren.

Achten Sie auf den fett gedruckten Teil, den Entwurfsmodus. Das heißt: Vor der Verwendung müssen wir den Dokumentmodus in den Entwurfsmodus umschalten.

document.designMode = 'on'

Nach Abschluss des Ausführungsbefehls legen Sie den Wert fest auf aus
Es gibt einen weiteren fett gedruckten Teil, einen bearbeitbaren Bereich, Standardeingabe- und Textbereichselemente, die bearbeitet werden können (die Einstellung von contenteditable="true" eines Elements kann auch den Bearbeitungsmodus des Elements aktivieren)

Sehen wir uns zunächst an, wie um Formularelemente zu implementieren

ele.addEventListener('click', () => {    document.designMode = 'on'
    let bool = document.execCommand('copy')    if (!bool) {
        alert('sorry, 手动复制吧')
    } else {        let val = 'something'
        let inputEle = document.createElement('input')        document.body.appendChild(inputEle)
        inputEle.setAttribute('value', val)
        inputEle.setAttribute('readonly', 'readonly')
        inputEle.select()        document.execCommand('copy')        document.body.removeChild(inputEle)
        alert('copied')
    }    document.designMode = 'off'})

Um den Cursor zu vermeiden oder die Eingabemethode aufzurufen, müssen Sie das schreibgeschützte Attribut für das Element festlegen

Die Methode inputEle.select() manchmal In einigen Browsern können nicht alle Inhalte ausgewählt werden. In diesem Fall müssen Sie die setSelectionRange-Methode von inputeElement verwenden: Die Methode

HTMLInputElement.setSelectionRange kann einen bestimmten Inhaltsbereich aus einem fokussierten
-Element auswählen.

Zusammenfassend zwei Zeilen hinzufügen:

...inputEle.focus()
inputEle.setSelectionRange(0, inputEle.value.length)
document.execCommand('copy')...

Wenn es sich nicht um ein Formularelement wie eine Eingabe handelt und select und setSelectRange nicht verwendet werden können, können wir zur Simulation die Methoden getSelection und createRange verwenden Dieser Prozess, Auswahl Das Objekt stellt den vom Benutzer ausgewählten Textbereich oder die aktuelle Position des Cursors dar, der den bearbeitbaren Aktivitätsbereich zum Ausführen des execComman-Befehls erfüllt, wie folgt

let range = document.createRange()let tar = document.querySelector('#code')
range.selectNodeContents(tar)let selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)document.execCommand('copy')
selection.removeAllRanges()

Das Obige kann auch sein implementiert für Nicht-Eingabe-, Textbereichs- und andere Formularelemente
im Zusammenhang mit Empfohlen:

JavaScript-Implementierungscode zum Kopieren von Inhalten in die Zwischenablage

Codefreigabe für den JS-Vorgang in der Zwischenablage

JavaScript-Zusammenfassung der Methoden zum Kopieren in die Zwischenablage

Das obige ist der detaillierte Inhalt vonJS-Implementierung des Beispielcode-Sharings zum Einfügen in die Zwischenablage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!