JS復(fù)制對應(yīng)id的內(nèi)容到粘貼板(Ctrl+C效果)
前言
最近在做一個按鈕,實現(xiàn)的效果是當(dāng)點擊后復(fù)制url到黏貼板,但不是當(dāng)前頁面url,而是對應(yīng)一個元素的url,且一個頁面會有多個url。一開始找到一個方法,但是竟然只兼容IE瀏覽器,神奇了,竟然有只兼容IE的東西。后來發(fā)現(xiàn)一個zeroclipboard.js這個插件,但是怎么也搞不出那個效果,有點麻煩。
最后翻到了一個js封裝好的方法,有效!
想要實現(xiàn)的一個效果是,下面html代碼:
<tr>
<td>
<a id="copy_{$key}" onclick="getUrl('{$key}')">復(fù)制文件鏈接</a>
<input id="file_{$key}" value="{$file.file_url}" style="margin-left: -9999px"/>
</td>
</tr>
點擊復(fù)制文件鏈接這個按鈕,復(fù)制input框里的value值,是傳進(jìn)去的一個url;首先點擊a標(biāo)簽會觸發(fā)getUrl這個函數(shù);傳進(jìn)去id用于找到對應(yīng)的input然后取值(因為遍歷了多個td,有許多個input框一一對應(yīng)去?。?/p>
下面js代碼:
<pre><script type="application/javascript">
function getUrl(id) {
if (copyToClipboard(document.getElementById("file_"+id))){
alert("成功復(fù)制到黏貼板!");
}else{
alert("復(fù)制到黏貼板失??!");
}
}
function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
}
</script></pre>
getUrl中調(diào)用了封裝好的copyToClipboard方法實現(xiàn)了功能。有一點的是html中input的樣式用style="margin-left: -9999px"進(jìn)行隱藏,因為不知道為什么用type="hiden"或者display="none"去隱藏都只會獲取源代碼而不是動態(tài)的url遍歷出來的值。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
相關(guān)文章
完美兼容IE,chrome,ff的設(shè)為首頁、加入收藏及保存到桌面js代碼
這篇文章主要給大家分享了完美兼容IE,chrome,ff的設(shè)為首頁、收藏本站及保存到桌面js代碼,有需要的小伙伴參考下。2014-12-12
Javascript中Null和undefined的簡單理解
在JavaScript中存在這樣兩種原始類型:Null與Undefined,這兩種類型常常會使JavaScript的開發(fā)人員產(chǎn)生疑惑,在什么時候是Null,什么時候又是Undefined,下面這篇文章主要給大家介紹了關(guān)于Javascript中Null和undefined的相關(guān)資料,需要的朋友可以參考下2022-04-04
JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用
這篇文章主要介紹了JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用場景與使用區(qū)別的介紹,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
JS在onclientclick里如何控制onclick的執(zhí)行
這篇文章主要介紹了JS在onclientclick里如何控制onclick的執(zhí)行的相關(guān)資料,需要的朋友可以參考下2016-05-05

