Heim > Web-Frontend > js-Tutorial > Codefreigabe für JS-Vorgänge in der Zwischenablage

Codefreigabe für JS-Vorgänge in der Zwischenablage

小云云
Freigeben: 2018-02-22 15:53:54
Original
1481 Leute haben es durchsucht

Javascript kann den Inhalt der Client-Zwischenablage problemlos manipulieren, ist jedoch nur auf Browser ab IE5 anwendbar. JavaScript kann den Inhalt der Zwischenablage mithilfe des window.clipboardData-Objekts verarbeiten. Methode setData(param1, param2) zum Speichern in der Zwischenablage. In diesem Artikel wird hauptsächlich die Verwendung von JS zur Bedienung der Zwischenablagefunktion vorgestellt und der Beispielcode wird geteilt. Freunde, die ihn benötigen, können daraus lernen.

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

Verwandte Empfehlungen:

Zusammenfassung der JavaScript-Methoden zum Kopieren in die Zwischenablage

HTML5 tatsächlicher Kampf und Analyse Zwischenablageereignis

Javascript - HTML5-Mobilentwicklung, wie kopiere ich in die Zwischenablage?

Das obige ist der detaillierte Inhalt vonCodefreigabe für JS-Vorgänge in der Zwischenablage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage