代碼詳解JS操作剪貼板

更新時(shí)間：2018年02月11日 13:33:32 投稿：laozhang

本篇文章給大家介紹了如何用JS操作剪貼板的功能，并把實(shí)例代碼做了分享，需要的朋友學(xué)習(xí)下吧。

javascript可以輕松操作客戶端剪貼板內(nèi)容，不過只適用IE5以上瀏覽器。

javascript可以使用window.clipboardData對(duì)象處理剪貼板內(nèi)容。

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

param1 :數(shù)據(jù)類型 text 或 URL等。

param2 :數(shù)據(jù)內(nèi)容。

從剪貼板讀出數(shù)據(jù)的方法 getdata(param1)

清空數(shù)據(jù)的方法 clearData(param1)

<HTML>  
<HEAD>  
<TITLE>測(cè)試操作剪貼板</TITLE>  
</HEAD>  
<script>  
function copyToClipboard()  
{  
 var d=document.all("source").value;  
 window.clipboardData.setData('text',d);  
}  
</script>  
<BODY>  
<button onclick="copyToClipboard();">拷貝</button>  
<input type="text" size=20 id="source" value="測(cè)試數(shù)據(jù)">  
<br>  
<button onclick="alert(window.clipboardData.getData('text'));">顯示</button>  
<button onclick="window.clipboardData.clearData('text');">清空</button>  
</BODY>  
</HTML>  

下面是另一個(gè)例子實(shí)現(xiàn)頁面中選中字符，并拖拉到文本區(qū)功能。注意其中的window.event.dataTransfer對(duì)象也可處理剪貼板內(nèi)容，不過只能用在 drag-and-drop 操作中。
<HTML>  
<HEAD>  
<TITLE>測(cè)試操作剪貼板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 = 'move';  
 window.event.returnValue = false;  
}  
</script>  

<BODY>
<p id="mySource" ondragstart="window.event.dataTransfer.effectAllowed = 'move';">選擇我們并把我們拖到下面的textarea</p>  
<textarea id="myTarget" ondrop="transferDrop();" ondragover="window.event.returnValue = false;" ondragenter="transferDrag();">  
</textarea>
</BODY>  
</HTML>

您可能感興趣的文章:

JS
剪貼板

相關(guān)文章

理解 JavaScript EventEmitter
本文是筆者看了eventemitter3 和 Node.js 事件模塊源碼后實(shí)現(xiàn)的 EventEmitter 。JavaScript 事件很重要，希望看了這篇文章的你們能有所收獲
2018-03-03
淺析Bootstrap驗(yàn)證控件的使用
這篇文章主要介紹了淺析Bootstrap驗(yàn)證控件的使用的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
JavaScript練習(xí)小項(xiàng)目之修改div塊的顏色
這篇文章主要給大家介紹了關(guān)于JavaScript練習(xí)小項(xiàng)目之修改div塊的顏色的相關(guān)資料,文中通過舉例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-01-01
js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)
這篇文章主要給大家介紹了關(guān)于js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)的相關(guān)資料,主要記錄一下比較常見的圖片格式（File、Blob、base64）在不同的場(chǎng)景他們之間的相互轉(zhuǎn)換的方法,需要的朋友可以參考下
2023-04-04
按下Enter焦點(diǎn)移至下一個(gè)控件的實(shí)現(xiàn)js代碼
正如標(biāo)題所言使用js操作按下Enter焦點(diǎn)移至下一個(gè)控件，具體的實(shí)現(xiàn)示例如下，需要的朋友可以參考下
2013-12-12
微信小程序bindtap事件與冒泡阻止詳解
這篇文章主要介紹了小程序bindtap事件與冒泡阻止詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
js實(shí)現(xiàn)指定時(shí)間倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)指定時(shí)間倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-08-08
如何利用JavaScript獲取字符串中重復(fù)次數(shù)最多的字符
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript獲取字符串中重復(fù)次數(shù)最多的字符的相關(guān)資料,文中介紹了兩種解決方案,分別是使用對(duì)象以及數(shù)組&指針來實(shí)現(xiàn),需要的朋友可以參考下
2021-07-07
JavaScript中的對(duì)象繼承關(guān)系
這篇文章主要介紹了JavaScript中的對(duì)象繼承關(guān)系的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
echarts拖拽滑塊dataZoom-slider自定義樣式簡(jiǎn)單適配移動(dòng)端
在電腦端和移動(dòng)端的數(shù)據(jù)展示中,針對(duì)移動(dòng)端的特殊性,進(jìn)行了一系列優(yōu)化措施,這篇文章主要介紹了echarts拖拽滑塊dataZoom-slider自定義樣式簡(jiǎn)單適配移動(dòng)端的相關(guān)資料,需要的朋友可以參考下
2024-09-09