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