然而

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>

Answer 1

How do I copy to the clipboard in JavaScript?

  document.execCommand('copy');

并非所有浏览器都支持它（chrome 43+，如果这可以让您了解它的新功能。）

浏览器使得将内容自动复制到剪贴板变得很困难。查看此答案以获取更多信息。

然而

如果您只是选择它以便用户可以手动复制它，请将文本存储在textarea / text字段中并将onclick = document.getElementById("idOfTextYouWantSelected").select();设置为＆＃34;按钮＆＃34;

例如：

 <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>

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元素中。

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()为具有特定类名的每个元素添加此类点击处理程序。

以下代码段演示了这种方法。它会显示定义并在您单击单词时选择定义的文本。

＆＃13;

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];
  }
};

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

自动复制隐藏文本

2 个答案:

然而