在下面的函数中有这个 var 链接。通过单击 button 我想将 var 复制到剪贴板。
function displayUser(user) {
var text = `Account No.: ${user.userId} <br> Country: ${user.country} <br>
"<button onclick="copyToClipboard(link)"> Copy Link</button>"`;
var link = `${user.Url}`;
grid.innerHTML += text;
}
function user(data) {
data.result.roomList.forEach((user) => displayUser(user));
}我在这里找到并尝试的是这个功能：
function copyToClipboard(link){
var dummy = document.createElement("input");
dummy.style.display = 'none';
document.body.appendChild(dummy);
dummy.setAttribute("id", "dummy_id");
document.getElementById("dummy_id").value=link;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);通过单击 button 它说“链接未定义”。任何人都知道如何使这项工作？
提前致谢
回答1
你可以这样做。这并没有使复制到剪贴板工作，但这就是您可以将它传递给您想要的函数的方式。
function displayUser(user) {
var grid = document.getElementById("testgrid");
console.log(grid);
var link = `${user.Url}`;
var text = `Account No.: ${user.userId} <br> Country: ${user.country} <br>
<button onclick="copyToClipboard('${link}')"> Copy Link</button>`;
grid.innerHTML += text;
}
function user(data) {
data.result.roomList.forEach((user) => displayUser(user));
}
function copyToClipboard(link){
console.log(link);
var dummy = document.createElement("input");
dummy.style.display = 'none';
document.body.appendChild(dummy);
dummy.setAttribute("id", "dummy_id");
document.getElementById("dummy_id").value=link;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
displayUser({Url: "bla", country: "blabla"});回答2
我尝试了现在看起来像这样的 Cypherjac 版本。我不再收到错误消息，但剪贴板中也没有结果。
function displayUser(user) {
var link = user.Url;
var text = `Account No.: ${user.userId} <br> Country: ${user.country} <br>
<button onclick="copyToClipboard(${link})"> Copy Link</button>`;
grid.innerHTML += text;
}
function user(data) {
data.result.roomList.forEach((user) => displayUser(user));
}
function copyToClipboard(link){
var dummy = document.createElement("input");
dummy.style.display = 'none';
document.body.appendChild(dummy);
dummy.setAttribute("id", "dummy_id");
document.getElementById("dummy_id").value=link;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}然后我尝试了现在看起来像这样的 Chris G 的建议。但也没有错误，也没有结果。还有什么想法吗？
let link;
function displayUser(user) {
var text = `Account No.: ${user.userId} <br> Country: ${user.country} <br>
"<button onclick="copyToClipboard()"> Copy Link</button>"`;
link = user.Url;
grid.innerHTML += text;
}
function user(data) {
data.result.roomList.forEach((user) => displayUser(user));
}
function copyToClipboard(){
var dummy = document.createElement("input");
dummy.style.display = 'none';
document.body.appendChild(dummy);
dummy.setAttribute("id", "dummy_id");
document.getElementById("dummy_id").value=link;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}回答3
如果您正在寻找另一种选择，我将提供一个我以前使用过的并且它有效。
因此，该功能也可用于其他浏览器，因此它支持 Edge、Chrome 和 Firefox ... IE 可能也可能不支持
点击一个button，初始化函数时提供的样式为：new clipboardHandler('copy-exec')，它触发一个文档复制函数来选择元素的previousSibling
您当然可以根据自己的需要对其进行调整。
然后还要注意：这两个元素背靠背放置在 HTML 中。那是因为如果你在它们之间放置任何空格，元素的 previousSibling 就会变成那个元素，它基本上是一个 non-breaking space 字符
但是一旦你改变了目标元素：previousSibling，它就会根据你的需要工作
function clipboardHandler(c){
function copy_relative_text(node){
if(document.body.createTextRange){
const range = document.body.createTextRange();
range.moveToElementText(node);
range.select();
document.execCommand('copy');
}
else if(window.getSelection){
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
}
else {
console.warn("Could not select text in node");
}
}
function clear_selection(){
if(window.getSelection){
window.getSelection().removeAllRanges();
}
else if(document.selection){
document.selection.empty();
}
}
this.clipboard_target = function(){
var clips = document.getElementsByClassName(c);
for(var i = 0; i < clips.length; i++){
clips[i].onclick = function(){
copy_relative_text(this.previousSibling);
setTimeout(() => {
clear_selection();
}, 500);
this.innerHTML = 'Copied';
setTimeout(() => {
this.innerHTML = 'Copy Link';
}, 2000);
};
}
return this;
};
}
let clip = new clipboardHandler('copy-exec')
clip.clipboard_target().copy-text {
margin-bottom: 3px;
}
.copy-exec {
background-color: teal;
color: #FFF;
border-radius: 5px;
padding: 5px;
border-style: none;
margin: 2px;
}<p class="copy-text">I will be copied to your clipboard!!!</p><button class="copy-exec">Copy Link</button>回答4
这部分应该是：
function displayUser(user) {
var link = user.Url;
var text = `Account No.: ${user.userId} <br> Country: ${user.country} <br>
"<button onclick="copyToClipboard('${link}')"> Copy Link</button>"`;
grid.innerHTML += text;
}
function user(data) {
data.result.roomList.forEach((user) => displayUser(user));
}变量链接无法访问，因为您在之后定义了它，而且您没有正确地将其括起来
我已更改此部分：
... onclick="copyToClipboard('${link}')" ...因为在调用函数时，是以实际的value作为参数调用的，所以当用引号括起来时，它将充当字符串