使用 JS 将文本复制到剪贴板
[英]Copy text to clipboard with JS
问题描述
我是一个 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 个解决方案
解决方案1
2 2022-06-12 19:50:38
像这样替换函数 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)"
解决方案2
1 已采纳 2022-06-12 20:27:58
我发现你的代码有一些问题
- 您没有更改输入中的 id 号，因此它们都会提醒相同的 URL，这使得很难判断哪个被点击了。
- 您正在对多次出现的 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);
}
在上述情况下，我不得不进行一些奇怪的遍历，因为您的输入超出了单击元素的范围。 我删除了与移动设备相关的代码，因为这与此问题无关（请随时将其放回）。
这是我的示例代码笔。
解决方案3
0 2023-06-04 06:40:21
这是将文本复制到剪贴板的方法
示例： 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>
使用'clipboard.js'不使用按钮将文本复制到剪贴板
[英]copy text to clipboard using 'clipboard.js' without button
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.