suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Antwort auf die Zwischenablage für JS-Operationen

Detaillierte Antwort auf die Zwischenablage für JS-Operationen

亚连
亚连Original
2018-06-06 10:13:511942Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden Sie die Vue-Grundlagen, um Hinzufügungen, Löschungen, Änderungen und Abfragen zu erstellenNächster Artikel：Verwenden Sie die Vue-Grundlagen, um Hinzufügungen, Löschungen, Änderungen und Abfragen zu erstellen

In Verbindung stehende Artikel

Mehr sehen