Javascript 复制到剪贴板函数消息在使用两次时不起作用

我从w3tutorials中编辑了这段代码。当您单击Hello World按钮时，它会显示Copied: Welcome Message。但是，如果单击John按钮，它不会显示任何内容。它会复制到剪贴板，但不会显示"Copied"消息。

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>

ids必须是唯一的您可能根本不想在此代码中使用任何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用于其他内容，也可以包含它们，它们只需要在页面上是唯一的。

您不能多次使用同一个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>

因为这一行：var tooltip = document.getElementById("myTooltip");，当您单击第二个按钮时，第一个工具提示中的文本会发生更改，因为您不能两次使用相同的ID。

我编辑了您的代码，以便使用类名选择工具提示，并在单击按钮时替换每个工具提示的文本。

检查此代码笔：https://codepen.io/anon/pen/YBEJjB

相关内容

最新更新

热门标签：