0
我想創建「複製到剪貼板」按鈕來處理我們的共享點。他們應該被放置在幾個不同的地方,我需要複製的是來自頁面上特定字段的一些文本(例如電子郵件列表)。複製到剪貼板按鈕
我知道,我可以選擇文本並複製它,但我們經常這樣做,所以有一個自動將文本複製到剪貼板的按鈕將非常有用。
我還是設法創造一個在腳本編輯器,在這裏我粘貼了以下完整代碼(這是我在互聯網上找到)
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
document.getElementById("copyButton").addEventListener("click", function() {
copyToClipboardMsg(document.getElementById("copyTarget"), "msg");
});
document.getElementById("copyButton2").addEventListener("click", function() {
copyToClipboardMsg(document.getElementById("copyTarget2"), "msg");
});
document.getElementById("pasteTarget").addEventListener("mousedown", function() {
this.value = "";
});
function copyToClipboardMsg(elem, msgElem) {
var succeed = copyToClipboard(elem);
var msg;
if (!succeed) {
msg = "Copy not supported or blocked. Press Ctrl+c to copy."
} else {
msg = "Text copied to the clipboard."
}
if (typeof msgElem === "string") {
msgElem = document.getElementById(msgElem);
}
msgElem.innerHTML = msg;
setTimeout(function() {
msgElem.innerHTML = "";
}, 2000);
}
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>
</head>
<body>
<input id="copyTarget" value="Some initial text"> <button id="copyButton">Copy</button><br><br>
<span id="copyTarget2">Some Other Text</span> <button id="copyButton2">Copy</button><br><br>
<input id="pasteTarget"> Click in this Field and hit Ctrl+V to see what is on clipboard<br><br>
<span id="msg"></span><br>
</body>
</html>
但我們有它存在的主要問題: 1)將重每當我們點擊「複製」按鈕頁面時 2)它不是非常優雅和友好,當我們考慮更新我們的文檔時
我會非常感謝您對我的任何提示,關於如何讓它工作得更好。
嗨 我已經找到了,但我無法弄清楚如何使用它。比方說,我對javascript的使用並不是很好,只是開始瞭解這些共享點的功能。如果您有任何指導如何使用它,我會很感激 – kjubus
請參閱主頁上的說明。這是代碼:https://github.com/zenorocha/clipboard.js/blob/master/demo/target-input.html – xqoo0ooq
好的,這有幫助。我已經設法按照我想要的方式製作按鈕,但它們仍然以共享點刷新我的頁面。有什麼方法可以消除這種情況嗎? – kjubus