如果使用两次，则无法将Javascript复制到剪贴板功能消息

时间：2019-02-07 09:00:51

标签： javascript html css

我有我从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 个答案:

答案 0 :(得分：3)

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，可以将它们包括在内，它们只需要在页面上唯一即可。

答案 1 :(得分：2)

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

答案 2 :(得分：0)

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

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

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

相关问题
最新问题