Detaillierte Antwort auf die Zwischenablage für JS-Operationen-js-Tutorial-php.cn

Detaillierte Antwort auf die Zwischenablage für JS-Operationen

亚连

Freigeben： 2018-06-06 10:13:51

Original

1920 Leute haben es durchsucht

In diesem Artikel wird erläutert, wie Sie die Zwischenablagefunktion mit JS bedienen, und Freunde, die ihn benötigen, können ihn lernen.

Javascript kann den Inhalt der Client-Zwischenablage problemlos manipulieren, ist jedoch nur auf Browser ab IE5 anwendbar.

Javascript kann das window.clipboardData-Objekt verwenden, um den Inhalt der Zwischenablage zu verarbeiten.

Methode setData(param1, param2) zum Speichern in der Zwischenablage.

param1: Datentyp Text oder URL usw.

param2: Dateninhalt.

Die Methode zum Lesen von Daten aus der Zwischenablage getdata(param1)

Die Methode zum Löschen von Daten clearData(param1)

<HTML>  
<HEAD>  
<TITLE>测试操作剪贴板</TITLE>  
</HEAD>  
<script>  
function copyToClipboard()  
{  
 var d=document.all("source").value;  
 window.clipboardData.setData(&#39;text&#39;,d);  
}  
</script>  
<BODY>  
<button onclick="copyToClipboard();">拷贝</button>  
<input type="text" size=20 id="source" value="测试数据">  
<br>  
<button onclick="alert(window.clipboardData.getData(&#39;text&#39;));">显示</button>  
<button onclick="window.clipboardData.clearData(&#39;text&#39;);">清空</button>  
</BODY>  
</HTML>  

下面是另一个例子实现页面中选中字符，并拖拉到文本区功能。注意其中的window.event.dataTransfer对象也可处理剪贴板内容，不过只能用在 drag-and-drop 操作中。
<HTML>  
<HEAD>  
<TITLE>测试操作剪贴板2</TITLE>  
</HEAD>  
<script>  
function transferDrop() {  
   window.event.srcElement.innerText = window.event.dataTransfer.getData("text");  
   window.event.returnValue = false;  
}  
function transferDrag() {  
 window.event.dataTransfer.dropEffect = &#39;move&#39;;  
 window.event.returnValue = false;  
}  
</script>  

<BODY>
<p id="mySource" ondragstart="window.event.dataTransfer.effectAllowed = &#39;move&#39;;">选择我们并把我们拖到下面的textarea</p>  
<textarea id="myTarget" ondrop="transferDrop();" ondragover="window.event.returnValue = false;" ondragenter="transferDrag();">  
</textarea>
</BODY>  
</HTML>

Nach dem Login kopieren

Das Obige ist das, wofür ich kompiliert habe Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden von GM-Cropping zum Synthetisieren von Bildern unter Nodejs

So verwenden Sie das Babel-Installations- und Konfigurations-Tutorial

So konfigurieren Sie die Babel-Konfigurationsdatei in vue-cli

Das obige ist der detaillierte Inhalt vonDetaillierte Antwort auf die Zwischenablage für JS-Operationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!