Beispielcode für den H5-Kopiervorgang

Anfangs gab es im Web keine für Clipborad zugänglichen Inhalte. In der Vergangenheit konnten wir Flash nur verwenden, wenn wir kopieren/einfügen/ausschneiden wollten. Aber jetzt hat das große H5 bzw. W3C einen Entwurf für die H5-Steuerungszwischenablage veröffentlicht. Am bekanntesten sind die beiden APIs:

document.execCommand()
ClipboardEvent

Lernen wir sie Schritt für Schritt kennen. Schauen wir uns zunächst die Verwendung des klassischen execCommand an.

Kopiervorgang

Eingabekopie

Wir müssen zuerst den grundlegenden Kopiervorgang verstehen:

wählen Sie

Kopieren ( command + c ||. ctrl + c)

execCommand folgt ebenfalls diesem Prozess, um diesen Effekt zu erzielen. Wenn wir execCommand zum Kopieren verwenden möchten, sollten wir zuerst das Element auswählen, das Sie kopieren möchten.
Hier wird auch eine neue API, window.getSelection(), verwendet. Konkret:

getSelection(): wird verwendet, um den Inhalt des aktuell ausgewählten Elements abzurufen. Im Allgemeinen verwenden Sie die Maus, um den Inhalt auf der Seite auszuwählen.

toString(): Wird verwendet, um den ausgewählten Inhalt direkt in Text umzuwandeln.

Die grundlegende Verwendung ist:

// Den ausgewählten Text ausgeben

window.getSelection().toString();

Im Allgemeinen verwenden wir diese API nur für Hilfsfunktionen. Der gebräuchlichste Ansatz besteht darin, Eingabeelemente dynamisch zu erstellen und dann Eingabe[Wert] dynamisch anzugeben. Führen Sie select() aus, wählen Sie aus und führen Sie dann den Kopiervorgang aus.

# Der Gesamtcode lautet

function copyContent(elementId) {
  // 动态创建 input 元素
  var aux = document.createElement("input");
  // 获得需要复制的内容
  aux.
set
Attribute("value", document.getElementById(elementId).innerHTML);
  // 添加到 DOM 元素中
  document.body.app
end
Child(aux);
  // 执行选中
  // 注意: 只有 input 和 textarea 可以执行 select() 方法.
  aux.select();
  
  // 获得选中的内容
    var content = window.getSelection().toString();
    
  // 执行复制命令
  document.execCommand("copy");
  // 将 input 元素移除
  document.body.removeChild(aux);
}

Sehen Sie sich ein Beispiel an

Kopieren Sie es nach Belieben

Natürlich, wenn Sie es nicht tun Wenn Sie keine Eingabeelemente dynamisch hinzufügen möchten, was sollten Sie tun, wenn Sie das angegebene DOM-Element direkt kopieren möchten? Hier müssen Sie die von HTML5 neu bereitgestellte Methode createRange() verwenden. Natürlich ist auch getSelection() oben eines davon. Die verwendeten APIs sind:

document.createRange(): wird zum Erstellen eines ausgewählten Containers verwendet. Gibt einen Bereich Objekt zurück. Auch die Kompatibilität dieser API ist sehr gut und wird sowohl von Mobiltelefonen als auch von PCs unterstützt.

selectNode(DOM): Gibt die auf dem Bereichsobjekt gemountete Methode zurück. Wird zum Hinzufügen ausgewählter Elemente verwendet. Es kann nur ein

window.getSelection()

addRange(range) hinzugefügt werden: Diese Methode wird unter der Methode getSelection() gemountet und wird zur Elementauswahl verwendet. (! Sehr wichtig)

Das ist die ganze API oben:

Sehen Sie sich einfach die Demo an

Hier poste ich den Schlüsselcode:

  var copyDOM = document.querySelector('#selector');  
  var range = document.createRange();  
  // 选中需要复制的节点
  range.selectNode(copyDOM);
  // 执行选中元素
  window.getSelection().addRange(range);
  // 执行 copy 操作
var successful = document.execCommand('copy');  
  try {  
    var msg = successful ? 'successful' : 'unsuccessful';  
    console.log('copy is' + msg);  
  } catch(err) {  
    console.log('Oops, unable to copy');  
  }
// 移除选中的元素
  window.getSelection().remove
All
Ranges();

Eine zusätzliche Erinnerung hier ist, dass der obige Kopiervorgang nicht automatisch durchgeführt werden kann. Das heißt, interaktive Verhaltensweisen wie das Kopieren können nicht ohne Benutzerinteraktion ausgeführt werden. Daher muss hier das Click--Ereignis verwendet werden (natürlich können Sie stattdessen auch andere Ereignisse verwenden).

Zum Kopieren die Zwischenablage verwenden

Zuallererst wurde die Zwischenablage kürzlich vorgeschlagen, daher muss ihre Kompatibilität noch auf die Überprüfung warten. Die aktuelle Kompatibilität dient der Unterstützung einiger einfacher Ereignisse.
Wenn Ihr Browser ClipboardEvent Constructor unterstützt. Dann wird der Kopiervorgang extrem einfach.

// Natürlich sollte der folgende Code im Click-Event einer Interaktion platziert werden.

var copyEvent = 
new
 ClipboardEvent('copy', {
            dataType: 'text/plain',
            data: 'My string'
        });
        document.dispatchEvent(copyEvent);

Wenn nicht, können Sie nur die API „event.clipboardData“ verwenden, die im Kopierereignis des Dokuments zurückgegeben wird, um die relevanten Informationen festzulegen oder abzurufen. Wir erhalten das ClipboardData -Objekt nur durch Ereignisrückrufe:

e.clipboardData: kann nur durch das Kopieren/Einfügen/Ausschneiden-Ereignis für das Dokument

document.addEvent
List
ener('copy', function(e){
    // 设置信息，实现复制
    e.clipboardData.setData('text/plain', 'Hello, world!');
    e.
prev
entDefault(); 
});

erhalten werden clipboardData: Dieses Objekt mountet auch zwei häufig verwendete APIs

Format: das ist der grundlegende MIME-Typ. Am häufigsten wird Text/Plain verwendet. Spezifische Inhalte finden Sie in den MIME-Referenzen.

Daten: Hierbei handelt es sich um den spezifischen Dateninhalt, der dem MIME-Typ entspricht.

setData(format, data): Legen Sie verwandte Dateninformationen fest, die hauptsächlich verwendet werden für Veranstaltungen zum Thema Kopieren und Ausschneiden.

getData(format): Wird im Allgemeinen in Einfügeereignissen verwendet. Wird verwendet, um den Inhalt der Zwischenablage abzurufen. Sie müssen jedoch das richtige Decodierungsformat (d. h. den richtigen MIME-Typ) einstellen. Außerdem kann diese Methode nur im Paste-Ereignis verwendet werden.

Das Obige scheint eine kurze Einführung in die API zu sein, und dann werde ich offiziell über einige praktische Informationen sprechen. Wenn Sie clipboardData verwenden, um benutzerdefinierte Kopierinhalte zu implementieren. Auf diese Weise können Sie nicht nur einfachen Text auf der Seite kopieren, sondern auch BilderInformationen usw. kopieren.

Sehen Sie sich den Code an

// Binden Sie interaktive Ereignisse an das angegebene DOM

DOM.addEventListener('click',function(){},false){
    // 添加 copy 内容
    document.addEventListener('copy',function copy (e) {
            msg = `<${msg}/>`;
            e.clipboardData.setData(&#39;text/plain&#39;, msg);
            e.preventDefault();
        })
    // 执行 copy 命令
    document.execCommand(&#39;copy&#39;);
    // 移除绑定事件
    document.removeEventListener(&#39;copy&#39;,&#39;copy&#39;);
}

Ausschneiden und Einfügen Verwandtes

Es sieht auch so aus wie zuvor Ganz einfach. Natürlich denken einige Schüler vielleicht: Gibt es nicht auch andere Ereignisse wie Ausschneiden und Einfügen? Ist es möglich, dasselbe zu tun?
Ähm...
Zuerst dachte ich das auch, aber die Realität streichelt einen oft sanft. Denn um zu verhindern, dass Sie böswillig Benutzerinformationen abrufen, können Sie in Chrome im Allgemeinen das Einfügeereignis nicht über document.execCommand ('paste') auslösen. In der mobilen Version gilt jedoch die Regel, dass Sie das Ausschneiden und Einfügen in bearbeitbaren Elementen auslösen können, das Kopieren jedoch nur in gültigen ausgewählten Elementen.

根据上面的说法，我们可以通过利用 paste 的相关方法，来具体应用到实践中。比如，防止用户粘贴信息。这特别适用于那些做题页面，防止你查资料然后 copy 相关答案。

document.addEventListener('paste',function copy (e) {            e.preventDefault();        });
当然，还有更狠的，直接禁止 copy，paste，cut 事件。
['cut', 'copy', 'paste'].forEach((event)=>{    document.addEventListener(event, (e)=>{        e.preventDefault();    });});

方案总结

HTML5 现在能完美提供给我们的应该就是 copy 事件的使用，对于市面上的 clipboard.js 差不多也是运用上述的知识点。根据上面的描述，可以了解到，想要实现复制功能有三种渐进退化方案。以下兼容性由高到低：

input 模式

createRange

clipboard 直接操作

现在 React 比较火，这里我简单的写了一个 copybtn 组件。具体的使用 README 已经写清楚了，如果有什么不懂的地方可以 @我。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

Das obige ist der detaillierte Inhalt vonBeispielcode für den H5-Kopiervorgang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!