cari

Rumah  >  Artikel  >  hujung hadapan web  >  详细解答JS操作剪贴板

详细解答JS操作剪贴板

亚连
亚连asal
2018-06-06 10:13:511929semak imbas

本篇文章给大家介绍了如何用JS操作剪贴板的功能，并把实例代码做了分享，需要的朋友学习下吧。

javascript可以轻松操作客户端剪贴板内容，不过只适用IE5以上浏览器。

javascript可以使用window.clipboardData对象处理剪贴板内容。

保存到剪贴板的方法setData(param1, param2)。

param1 :数据类型 text 或 URL等。

param2 :数据内容。

从剪贴板读出数据的方法 getdata(param1)

清空数据的方法 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>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Nodejs下使用gm裁剪在合成图片

如何使用babel安装配置教程

在vue-cli中如何配置babel配置文件

Atas ialah kandungan terperinci 详细解答JS操作剪贴板. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：使用vue基础创建增删改查Artikel seterusnya：vue-router项目实战（详细教程）

Artikel berkaitan

Lihat lagi