1. 程式人生 > >JS實現點選按鈕複製<input>標籤中的值到剪貼簿

JS實現點選按鈕複製<input>標籤中的值到剪貼簿

<div id="div">  
    <p>我的推廣連結:</p>  
    <input id="input" value="http://www.baidu.com" readonly/>  
    <button onclick="copyUrl()">點選複製連結</button>  
</div>
<script>	
function copyUrl() {  
    var Url=document.getElementById("input");  
    Url.select(); // 選擇物件  
    document.execCommand("Copy"); // 執行瀏覽器複製命令  
    alert("複製成功!");  
}
</script>

1、<input>標籤裡的值應該設定為只讀,所以加了屬性readonly。一開始我加了disabled,發現不能複製,後來查了,用readonly才能複製。

2、程式碼的最後一行用了layer外掛,外掛地址:http://layer.layui.com/

2018/06/14更新:

題外話:昨天接了一個面試電話,是我做夢都想進的公司的(從我學前端沒多久後,就想進的,原因是覺得他們的前端工程師一定個個都很厲害,哈哈哈)。給我激動了好幾天,但是也害怕了好幾天,因為我真的很多東西都不懂,特別是底層原理和原生JS的東西。結果想當然啦,雖然我盡我最大的努力準備了,但是不像高中考試臨時抱佛腳也可以...因為前端的知識面真是太廣了~不過通過這次電話面試,我也發現了,自己以前那麼學前端真的是非常不努力,而且都是隻知其然,不知其所以然!繼續努力吧,爭取早日實現夢想!!!然後見到我的偶像LLH。人真的超級超級nice!

言歸正傳:

面試電話裡被問了這篇部落格文章裡的複製貼上到剪貼簿功能的程式碼的相容問題,我可能那時候用這個功能的時候根本沒意識到會有相容問題,所以也沒有在IE下測試,然後面試官告訴我,在IE下會有相容問題不能使用。然後我今天就來測試測試啦。

為了偶像,他說要查文件才知道,我很傻地問了:“什麼文件?我自己去查。”

偶像說:document.execCommand

然後我第一次發現MDN文件上原來還有瀏覽器相容性說明。簡直無知...


文件寫了,IE9及以上開始支援,於是我用IE9測試了,又拿IE10、11測試了,然後把瀏覽器除錯回IE8、IE7都試了,除了跳出提示需要載入一個ActiveX的控制元件外,剪貼簿的功能是可以用的。

然後我在想,會不會除錯的IE8和真實的IE8不一樣,就把自己電腦上的IE11給解除安裝了,重啟,預設回到了IE8,結果也是一樣,允許裝ActiveX控制元件後,剪貼簿複製貼上功能還是可以用...

有人知道這個問題嗎?那這在IE8及以下到底有沒有相容問題呀?求指教。

如果純粹是因為ActiveX控制元件,那我在IE11下測試也是提示要裝這個控制元件啊。可以用JS判斷下瀏覽器是不是IE的,是的話,多加一條文字提醒使用者在IE下需要允許ActiveX控制元件就行了吧。