开发者问题收集

使用 JS 将文本复制到剪贴板

2022-06-12
17978
javascript html css url copy

我是 JS 初学者，我遇到了以下问题：我希望只要有人点击折叠面板内的 URL 图标，相应的链接就会被复制到剪贴板。不幸的是（总是）只有第一个链接被复制到剪贴板，即使点击其他两个 URL 图标，也只有第一个链接被复制。虽然当我点击 URL 图标 2 时，剪贴板中应该是链接 2（来自值字段）（当然，对于 3 号也是如此）。我希望我已经足够清楚地描述了这个问题。

错误在哪里，我需要对 JS 代码进行哪些更改才能使其正常工作？非常感谢您的帮助！ 

```
<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}
input {
  display: none;
}
label {
  display: block;    
  padding: 8px 22px;
  margin: 0 0 1px 0;
  cursor: pointer;
  background: #181818;
  border: 1px solid white;
  border-radius: 5px;
  color: #FFF;
  position: relative;
}
label:hover {
  background: white;
  border: 1px solid white;
  color:black;
}
label::after {
  content: '+';
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 2px;
}
input:checked + label::after {
  content: '-';
  right: 14px;
  top: 3px;
}
.content {
  background: #DBEECD;
  background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: linear-gradient(to top left, #DBEECD, #EBD1CD);
  padding: 10px 25px 10px 25px;
  border: 1px solid #A7A7A7;
  margin: 0 0 1px 0;
  border-radius: 1px;
}
input + label + .content {
  display: none;
}
input:checked + label + .content {
  display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
 /* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
} 
</style>
</head>
<body>

<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>

<div class="content">

<div class="tooltip"><div class="whitepaper" onclick="myFunction()"><div class="blackframe"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div></div><input type="text" value="https://mywebsite.com/#title1" id="myInput"></div>

</div>

<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>

<div class="content">

<div class="tooltip"><div class="whitepaper" onclick="myFunction()"><div class="blackframe"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div></div><input type="text" value="https://mywebsite.com/#title2" id="myInput"></div>

</div>

<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>

<div class="content">

<div class="tooltip"><div class="whitepaper" onclick="myFunction()"><div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div></div><input type="text" value="https://mywebsite.com/#title3" id="myInput"></div>

</div>

<script>
function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);

  /* Alert the copied text */
  alert("Copied: " + copyText.value);
} 
</script>

</body>
</html>
```
3个回答

像这样替换函数 myFunction： 

function myFunction(event) {
    var target = event.target;
    var copyText = target.nextElementSibling;

    navigator.clipboard.writeText(copyText.value);

    alert("Copied: " + copyText.value);
}

然后像这样更新所有 onclick 属性 

onclick="myFunction(event)"
Richard Dobroň
2022-06-12

2023 年 3 月更新

似乎 codepen 在某个时候坏了，因为 event.target 返回了第一个子元素而不是点击的目标。 解决方案是使用 event.currentTarget 获取实际点击的元素。 这是新的解决方案，它与旧解决方案非常相似，但有一些调整。 

function myFunction(event) {
  /* Get the text field */
  var copyText = event.currentTarget.firstElementChild.nextElementSibling.value
    
   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText);

  /* Alert the copied text */
  alert("Copied: " + copyText);
}

==============================================

我发现您的代码存在一些问题

  1. 您没有更改输入上的 ID 号，因此它们都会提醒同一个 URL，这使得很难分辨哪个被点击了。
  2. 您正在对多次出现的 ID 进行查询选择。这意味着它不会在点击的元素上触发。

我的方法包括通过将点击的元素传递到您的点击处理程序中来利用它。 

    <div class="tooltip">
        <div class="whitepaper" onclick="myFunction(event)">
            <div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
        </div><input type="text" value="https://mywebsite.com/#title3" id="myInput">
    </div>

这使我能够将该 event 传递给函数调用，这将使我们能够访问当前目标节点。 

function myFunction(event) {
  /* Get the text field */
    var copyText = event.target.parentNode.nextSibling.nextSibling.value

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText);

  /* Alert the copied text */
  alert("Copied: " + copyText);
}

在上述情况下，我不得不进行一些奇怪的遍历，因为您的输入超出了点击元素的范围。我删除了与移动内容相关的代码，因为这与此问题无关（请随意将其放回原处）。

这里是带有我的示例的 codepen 。

LTFoReal
2022-06-12

以下是如何将文本复制到剪贴板

示例： https://codepen.io/gmkhussain/pen/gOjaRzY 

function copyFunc(elemId) {

        let that = document.querySelector(elemId);

        navigator.clipboard.writeText(that?.innerText).then(res => {
          console.log("Copeid to clipboard: " + that.innerText );
          
          that.classList.add("copied")
          setTimeout(()=> that.classList.remove("copied"), 2000)
          
        });
    }

<span class='box'>
       <span id="c1">Something One</span>
       <button class="btn" onclick="copyFunc('#c1')">Copy</button>
    </span>
         
     <span class='box'>
       <span id="c2">Amoos John Wick</span>
       <button class="btn" onclick="copyFunc('#c2')">Copy</button>
    </span>
GMKHussain
2023-06-04