如果使用两次，则无法将Javascript复制到剪贴板功能消息
[英]Javascript copy to clipboard function messages doesn't work if used twice
问题描述
我有我从w3tutorials编辑的这段代码。 当您单击“ Hello World按钮时，它显示“已Copied: Welcome Message 。 但是，如果您单击John按钮，它什么也没说。 它复制到剪贴板，但不显示“已复制”消息。
function myFunction(classID, IDName) { var copyText = document.getElementById(classID); copyText.select(); document.execCommand("copy"); var tooltip = document.getElementById("myTooltip"); tooltip.innerHTML = "Copied: " + IDName; } function outFunc() { var tooltip = document.getElementById("myTooltip"); tooltip.innerHTML = "Copy to clipboard"; }
body { margin: 50px; } .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 140px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; } .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; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
<body> <input type="text" value="Hello World" id="welcome"> <div class="tooltip"> <button onclick="myFunction('welcome', 'Welcome Message')" onmouseout="outFunc()"> <span class="tooltiptext" id="myTooltip">Copy to clipboard</span> Copy text </button> </div> <br> <input type="text" value="John" id="fname"> <div class="tooltip"> <button onclick="myFunction('fname', 'First Name')" onmouseout="outFunc()"> <span class="tooltiptext" id="myTooltip">Copy to clipboard</span> Copy text </button> </div> </body>
3 个解决方案
解决方案1
3 已采纳 2019-02-07 09:14:48
id必须是唯一的。 您可能根本不想在此代码中使用任何ID。 相反，将每个结构放在div以便您可以在结构上而不是通过ID将元素彼此关联（这也消除了对该<br>的需要）。 例如，具有以下结构：
<div class="group">
<input type="text" value="Hello World">
<div class="tooltip">
<button onclick="myFunction(this, 'Welcome Message')" onmouseout="outFunc(this)">
<span class="tooltiptext">Copy to clipboard</span>
Copy text
</button>
</div>
</div>
请注意， this已传递到处理程序函数中（确实，我们应该使用现代事件处理，但我尝试不要一口气更改太多）。 this将是函数所附加的元素。 然后在代码中，很容易找到该组中的其他各种元素：
function myFunction(button, IDName) {
var input = button.closest(".group").querySelector("input");
input.select();
document.execCommand("copy");
var tooltip = button.querySelector(".tooltiptext");
tooltip.innerHTML = "Copied: " + IDName;
}
function outFunc(button) {
var tooltip = button.querySelector(".tooltiptext");
tooltip.innerHTML = "Copy to clipboard";
}
然后，当然，和往常一样，我们可以将通用代码分解为实用程序函数：
function myFunction(button, IDName) {
var input = button.closest(".group").querySelector("input");
input.select();
document.execCommand("copy");
setTooltipForButton(button, "Copied: " + IDName);
}
function outFunc(button) {
setTooltipForButton(button, "Copy to clipboard");
}
function setTooltipForButton(button, text) {
button.querySelector(".tooltiptext").innerHTML = text;
}
我应该注意，它使用Element#closest ，现代浏览器支持它，但某些旧浏览器不支持。 不过，您可以将polyfill用于较旧的浏览器来添加它。
现场示例：
function myFunction(button, IDName) { var input = button.closest(".group").querySelector("input"); input.select(); document.execCommand("copy"); setTooltipForButton(button, "Copied: " + IDName); } function outFunc(button) { setTooltipForButton(button, "Copy to clipboard"); } function setTooltipForButton(button, text) { button.querySelector(".tooltiptext").innerHTML = text; }
body { margin: 50px; } .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 140px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; } .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; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
<div class="group"> <input type="text" value="Hello World"> <div class="tooltip"> <button onclick="myFunction(this, 'Welcome Message')" onmouseout="outFunc(this)"> <span class="tooltiptext">Copy to clipboard</span> Copy text </button> </div> </div> <div class="group"> <input type="text" value="John"> <div class="tooltip"> <button onclick="myFunction(this, 'First Name')" onmouseout="outFunc(this)"> <span class="tooltiptext">Copy to clipboard</span> Copy text </button> </div> </div>
当然，如果您需要别的id ，可以将它们包括在内，它们只需要在页面上唯一即可。
解决方案2
2 2019-02-07 09:11:26
您不能多次使用相同的ID。
您可以添加计数器或指针以使ID唯一。
function myFunction(classID, IDName) { var copyText = document.getElementById(classID); copyText.select(); document.execCommand("copy"); var tooltip = document.getElementById("myTooltip-" + classID); //modify here tooltip.innerHTML = "Copied: " + IDName; } function outFunc(classID) { var tooltip = document.getElementById("myTooltip-" + classID);//modify here tooltip.innerHTML = "Copy to clipboard"; }
body { margin: 50px; } .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 140px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; } .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; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
<body> <input type="text" value="Hello World" id="welcome"> <div class="tooltip"> <button onclick="myFunction('welcome', 'Welcome Message')" onmouseout="outFunc('welcome')"><!--modify here--> <span class="tooltiptext" id="myTooltip-welcome"><!--modify here-->Copy to clipboard</span> Copy text </button> </div> <br> <input type="text" value="John" id="fname"> <div class="tooltip"> <button onclick="myFunction('fname', 'First Name')" onmouseout="outFunc('welcome')"><!--modify here--> <span class="tooltiptext" id="myTooltip-fname"><!--modify here-->Copy to clipboard</span> Copy text </button> </div> </body>
解决方案3
0 2019-02-07 09:14:29
由于这一行： var tooltip = document.getElementById("myTooltip"); ，当您单击第二个按钮时，第一个工具提示中的文本会更改，因为您不能两次使用相同的ID。
我编辑了您的代码，以使用类名选择工具提示，并在单击按钮时替换每个工具提示的文本。
检查此代码笔： https ://codepen.io/anon/pen/YBEJjB
javascript将div的内容从画布复制到剪贴板中在Firefox上不起作用
[英]javascript copy content of a div into clipboard from a canvas doesn't work on Firefox
在引导模式中调用时，工作“复制到剪贴板”功能不起作用
[英]Working "Copy to Clipboard" function doesn't work when called in bootstrap modal
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.