自动复制隐藏文本

Question

我有以下HTML代码。这是一个单词，下面有维基百科的定义。点击应该突出显示定义。

我需要帮助重写这段代码。所以只有单词会出现，定义应该隐藏。但当有人点击单词时，定义将自动复制到剪贴板。我尝试搜寻提示，但没有找到。

<p><strong>Gold</strong><br />
    <textarea cols="70" onclick="this.focus();this.select()" readonly="readonly" rows="5"
     style="color: black; background-color: lightgreen;
     border:1px solid #AD8C08">
        Gold is a chemical element with symbol Au and atomic number 79.
        In its purest form, it is a bright, slightly reddish yellow,
        dense, soft, malleable and ductile metal. Chemically, gold is
        a transition metal and a group 11 element.
    </textarea>
</p>

- JAMES

---

脚本看起来像是 Google Analytics 跟踪代码。你是否忘记粘贴实际的脚本了？ - beercohol

Answer 1

如何在 JavaScript 中复制到剪贴板？

  document.execCommand('copy');

并不是所有的浏览器都支持它（如果你想知道它有多新，chrome 43+ 支持）。

浏览器很难自动将内容复制到剪贴板中。查看这个答案获取更多信息。

然而

如果你只是想让用户手动复制选定的文本，可以将文本存储在 textarea / 文本字段中，并将 onclick = document.getElementById("idOfTextYouWantSelected").select(); 设置为“按钮”。

例如：

 <p>
      <strong onclick = 'document.getElementById("textAreaForGold").select();'>Gold</strong>
      <br />
      <textarea cols="70" id = 'textAreaForGold' readonly="readonly" rows="5" style="color: black; background-color: lightgreen; border:1px solid #AD8C08">
         Gold is a chemical element with symbol Au and atomic number 79.
         In its purest form, it is a bright, slightly reddish yellow,
         dense, soft, malleable and ductile metal. Chemically, gold is
         a transition metal and a group 11 element.
      </textarea>
 </p>

- Ulad Kasach

---

我刚意识到自动复制并不是一个好主意。那么，将定义隐藏起来，但当有人点击“Gold”这个单词时，定义会在背景中突出显示，这样我就可以手动使用Ctrl+C进行复制了。对此有什么建议吗？谢谢！ - JAMES

将文本放入文本区域/输入字段中，并将 onclick = document.getElementById("idOfTextYouWantSelected").select(); 添加为该按钮的属性。 - Ulad Kasach

感谢大家分享你们的知识！我刚做了几个更改，哇！现在它像魔法一样工作了！谢谢！ - JAMES

你懂了伙计。记录一下 - 我得到的大部分答案都是通过谷歌从网站本身获得的。下次，尝试分解问题并自己找出解决方案。在这个过程中你会学到更多。 - Ulad Kasach

Answer 2

你可以使用execCommand('copy')复制可编辑元素的内容。

如果该元素是不可编辑的，比如div，你可以使用以下函数来选择其内容：

function selectText(element) {
  if (document.selection) {
    var range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNodeContents(element);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  }
}

现在让我们考虑当用户点击单词时显示定义的问题。一个简单的方法是向包含单词和定义的HTML元素添加以下click处理程序。

function clickWord() {
  if (this.box.className.indexOf('visible') == -1) {
    this.box.className = 'wordBox visible';
  } else {
    this.box.className = 'wordBox';
  }
}

定义可以默认使用样式display: none，您可以编写CSS规则将display: block应用于.visible元素内的元素。

您可以使用getElementsByClassName()为每个具有特定类名的元素添加此类单击处理程序。

以下代码段演示了此方法。当单击该词时，它既显示定义，又选择定义的文本。

function selectText(element) {
  if (document.selection) {
    var range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNodeContents(element);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  }
}

var autoHide = false,
    autoHideSeconds = 1;

function clickWord() {
  var box = this.box;
  if (box.className.indexOf('visible') == -1) {
    box.className = 'wordBox visible';
    selectText(this.definition);
    if (autoHide) {
      window.setTimeout(function () {
        if (box.className.indexOf('visible') != -1) {
          box.className = 'wordBox';
        }
      }, autoHideSeconds * 1000);
    }
  } else {
    box.className = 'wordBox';
  }
  
}

window.onload = function () {
  var boxes = document.getElementsByClassName('wordBox');
  for (var i = 0; i < boxes.length; ++i) {
    var box = boxes[i],
        word = box.getElementsByClassName('word')[0];
    word.box = box;
    word.onclick = clickWord;
    word.definition = box.getElementsByClassName('definition')[0];
  }
};

body {
  font-family: sans-serif;
}

.wordBox {
  margin: 20px 0;
}

.word {
  cursor: pointer;
  padding: 4px 8px;
  border: 2px solid #888;
  border-radius: 5px;
  color: #333;
}
.word:hover {
  border-color: #444;
  color: #000;
}

.definition {
  display: none;
}

.visible .definition {
  display: block;
  padding: 8px;
  margin-top: 5px;
  color: #000;
  background-color: #cde5dd;
}

<div class="wordBox">
  <span class="word"> Platinum </span>
  <div class="definition"> Platinum is a chemical element with symbol Pt and atomic number 78. It is a dense, malleable, ductile, highly unreactive, precious, gray-white transition metal. Its name derives from the Spanish word <i>platina</i>, meaning "little silver". </div>
</div>

<div class="wordBox">
  <span class="word"> Gold </span>
  <div class="definition"> Gold is a chemical element with symbol Au and atomic number 79. In its purest form, it is a bright, slightly reddish yellow, dense, soft, malleable and ductile metal. Chemically, gold is a transition metal and a group 11 element. </div>
</div>

<div class="wordBox">
  <span class="word"> Silver </span>
  <div class="definition"> Silver is a chemical element with symbol Ag and atomic number 47. A soft, white, lustrous transition metal, it possesses the highest electrical conductivity, thermal conductivity and reflectivity of any metal. Most silver is produced as a byproduct of copper, gold, lead, and zinc refining. </div>
</div>

<div class="wordBox">
  <span class="word"> Copper </span>
  <div class="definition"> Copper is a chemical element with symbol Cu (from Latin: cuprum) and atomic number 29. It is a ductile metal with very high thermal and electrical conductivity. Pure copper is soft and malleable; a freshly exposed surface has a reddish-orange color. It is used as a conductor of heat and electricity, a building material, and a constituent of various metal alloys. </div>
</div>

<div class="wordBox">
  <span class="word"> Aluminum </span>
  <div class="definition"> Aluminum is a chemical element in the boron group with symbol Al and atomic number 13. It is a silvery-white, soft, nonmagnetic, ductile metal. Aluminum is the third most abundant element (after oxygen and silicon) in the Earth's crust, and the most abundant metal there. It makes up about 8% by weight of the crust, though it is less common in the mantle below. </div>
</div>

- Michael Laszlo

---

嗨，迈克尔，非常感谢！这真的很棒！顺便问一下，有没有办法防止框扩展。如果不可能，是否有一种方法可以在一定时间后将框设置为折叠？尽可能地，我不希望它一直扩展以节省空间和滚动时间。谢谢！ - JAMES

必须显示框以选择其中的文本。但是，自动隐藏框是可能的。我已经在上面的代码片段中添加了一个名为“autoHide”的变量。如果它的值为“false”，则只有在第二次单击该单词时框才会消失。如果将“autoHide”设置为“true”，则框会在您可以使用变量“autoHideSeconds”进行配置的几秒钟后自动消失。 - Michael Laszlo