Javascript控制剪貼簿大全

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

看到UBB代碼[ code ]視窗的時候會有個"複製到剪貼簿"的功能.我覺得很好用.
突然想到檔案上傳後,出現在"地址(路徑)"位置的URL,給他加個複製的按鈕吧.
研究了一下原來的代碼..
定義函數

程式碼view plaincopy to clipboardprint?

function CopyText(obj) {
ie = (document.all)? true:false
if (ie){
var rng = document.body.createTextRange(); //列出所有文字物件內容
rng.moveToElementText(obj);//移動文本範圍以便範圍的開始和結束位置能夠完全包含給定元素的文本
rng.scrollIntoView();//scrollIntoView 將對象滾動到可見範圍內，將其排列到
視窗頂部或底部
rng.select();//選擇
rng.execCommand("Copy");//複製
rng.collapse(false);//不太明白..
}
}

function CopyText(obj) {<br />ie = (document.all)? true:false<br />if (ie){<br /> var rng = document.body.createTextRange(); //列出所有文字物件內容<br /> rng.moveToElementText(obj);//移動文本範圍以便範圍的開始和結束位置能夠完全包含給定元素的文本<br /> rng.scrollIntoView();//scrollIntoView 將對象滾動到可見範圍內，將其排列到<br />視窗頂部或底部<br /> rng.select();//選擇<br /> rng.execCommand("Copy");//複製<br /> rng.collapse(false);//不太明白..<br />}<br />}<br />
然後用

程式碼
<a href="javascript:CopyText(document.all.CODE_8223);">[ 複製代碼到剪貼簿 ]</a> </td></tr></table><div class="code_main" id="CODE_8223">需要複製的代碼...</div>

它主要是選中要複製的文字物件,然後用exeCommand("Copy")來複製.
之後我照班了一個..結果發現<input type=text>裡面的東西無法複製..只能選中外面的框..
又在網上找了一些資料...終於有了答案.嘿嘿..
==========================================
javascript Tip(1) 操作剪貼簿
javascript可以輕鬆操作用戶端剪貼簿內容，不過只適用IE5以上瀏覽器
javascript可以使用window.clipboardData對象處理剪貼簿內容
儲存到剪貼簿的方法 setData(param1, param2)
param1 :資料類型 text 或 URL等.
param2 :資料內容

從剪貼簿讀出資料的方法 getdata(param1)
清空資料的方法 clearData(param1)

下面是一個例子示範

程式碼view plaincopy to clipboardprint?

<HTML>
<HEAD>
<TITLE>測試操作剪貼簿</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="測試資料">
<br>
<button onclick="alert(window.clipboardData.getData('text'));">顯示</button>
<button onclick="window.clipboardData.clearData('text');">清空</button>
</BODY>
</HTML>

<HTML><br /><HEAD><br /><TITLE>測試操作剪貼簿</TITLE><br /></HEAD><br /><script><br />function copyToClipboard()<br />{<br />var d=document.all("source").value;<br />window.clipboardData.setData('text', d);<br />}<br /></script><br /><BODY ><br /><button onclick="copyToClipboard();">拷貝</button><br /><input type="text" size=20 id="source" value="測試資料"><br /><br><br /><button onclick="alert(window.clipboardData.getData('text'));">顯示</button><br /><button onclick="window.clipboardData.clearData('text');">清空</button><br /></BODY><br /></HTML><br />
下面是另一個例子實現頁面中選中字元，並拖拉到文本區功能
注意其中的window.event.dataTransfer對象也可處理剪貼簿內容，不過只能用在 drag-and-drop 操作中

程式碼view plaincopy to clipboardprint?

<HTML>
<HEAD>
<TITLE>測試操作剪貼簿2</TITLE>
</HEAD>
<script>
function transferDrop() {
windowwindow.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>

<HTML><br /><HEAD><br /><TITLE>測試操作剪貼簿2</TITLE><br /></HEAD><br /><script><br />function transferDrop() {<br />window.event.srcElement.innerText = window.event.dataTransfer.getData("text");<br />window.event.returnValue = false;<br />}<br />function transferDrag() {<br />window.event.dataTransfer.dropEffect = 'move';<br />window.event.returnValue = false;<br />}<br /></script><br /><BODY<br /><p id="mySource" ondragstart="window.event.dataTransfer.effectAllowed =<br />'move';">選擇我們並把我們拖到下面的textarea</p><br /><textarea id="myTarget" ondrop="transferDrop();"<br />ondragover="window.event.returnValue = false;" ondragenter="transferDrag();"><br /></textarea><br /></BODY><br /></HTML><br />
==============================
發現用
window.clipboardData.setData("text",value)
window.clipboardData.getData("text")
window.clipboardData.clearData("text")
很容易控制剪貼簿的內容了..

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More