如何从活动选项卡复制文本？

Question

我创建了一个带有三个按钮的选项卡菜单。传递<div> id 后，我可以复制单个选项卡内容。如何获取活动<div> 的ID，以便通过range.selectNode(document.getElementById(*ID*)) 传递ID 以复制当前活动选项卡的内容？

//  function to copy
function CopyToClipboard(){
   var range = document.createRange();

   range.selectNode(document.getElementById("Cricket"));

   window.getSelection().removeAllRanges(); /* clear current selection*/
   window.getSelection().addRange(range); /* to select text*/
   document.execCommand("copy");
   window.getSelection().removeAllRanges();/* to deselect*/
}

function openGame(evt, GameName){
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(GameName).style.display = "block";
    evt.currentTarget.className += " active";
}

<button onclick="CopyToClipboard()" >Copy</button>
<p>Click to copy:</p>
<div class="tab">
    <button class="tablinks" onclick="openGame(event, 'Cricket')">Cricket</button>
    <button class="tablinks" onclick="openGame(event, 'Football')">Football</button>
    <button class="tablinks" onclick="openGame(event, 'Chess')">Chess</button>
</div>
		
<div class="container" id="frame">
  <div id="Cricket" class="tabcontent"> 
    <p>Cricket</p>
  </div>

  <div id="Football" class="tabcontent">
    <p>Football</p> 
  </div>

  <div id="Chess" class="tabcontent">
    <p>Chess</p>
  </div>
</div>

Answer 1

在本例中，您所要做的就是将活动选项卡 ID 存储在这些函数范围之外的变量中。

//  function to copy
var activeTabId = 'Cricket'; // Or whatever your default tab is

function CopyToClipboard(){
   var range = document.createRange();

   //range.selectNode(document.getElementById("Cricket"));
   range.selectNode(document.getElementById(activeTabId)); // here you use the variable
   
   window.getSelection().removeAllRanges(); /* clear current selection*/
   window.getSelection().addRange(range); /* to select text*/
   document.execCommand("copy");
   window.getSelection().removeAllRanges();/* to deselect*/
}

function openGame(evt, GameName){
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(GameName).style.display = "block";
    evt.currentTarget.className += " active";
    
    activeTabId = GameName; // here you assign the active tab value
}

还有。 您可能希望提前获取选项卡的引用 - 这样您就不必在每次执行两个函数时都搜索 DOM。

Answer 2

您可以简单地将 CopyToClipboard 函数调整为：

我使用 querySelector 来获取活动的 tablink 元素，然后获取它的内部文本，它是 tabcontent id 之一。

//  function to copy
function CopyToClipboard(){
  var activeTabId = document.querySelector('.tablinks.active').innerText;

   var range = document.createRange();

   range.selectNode(document.getElementById(activeTabId));

   window.getSelection().removeAllRanges(); /* clear current selection*/
   window.getSelection().addRange(range); /* to select text*/
   document.execCommand("copy");
   window.getSelection().removeAllRanges();/* to deselect*/
}

Answer 3

您可以像CopyToClipboard(GameName) 一样在openGame() 中调用函数CopyToClipboard() 并将range.select 节点更改为range.selectNode(document.getElementById(GameName)); 在定义复制到剪贴板功能时也传递一个参数。

Answer 4

问题：“如何获取活动<div> 的ID？”

回答这个具体问题：

活动按钮具有“tablinks active”类，它的 innerHTML 包含与活动 div 的 ID 相同的文本。

此函数将从活动按钮中检索与 div 的 ID 匹配的文本：

  // return the active div's ID
  function activeDivId () {
    let activeButtons =
      document.getElementsByClassName('tablinks active');
    if (activeButtons.length === 0) {
      return null;
    }
    const activeButton = activeButtons[0];
    return activeButton.innerHTML;
  }

---

让它变得更好

虽然这严格回答了问题，但它并不是最有效的方法，并且有多种方法可以使代码变得更好。

以下原则可以指导改进：

1. 始终将应用的状态存储在 DOM 之外。
2. 为了提高速度，尽量减少对 DOM 的查询和操作。
3. 为避免命名冲突，请将变量和函数名称包含在对象中。
4. 当for...of 或for...in 足够时，避免使用索引for 循环。

以下是该游戏的修改版本，遵循以下原则：

  // put game inside an object to avoid global name conflicts
  const myGame = {

    // static parts of the DOM
    tabcontent: document.getElementsByClassName('tabcontent'),
    tablinks: document.getElementsByClassName('tablinks'),

    // name of currently active game
    activeGame: null,

    // div of active game content
    activeTabContent: null,

    // button of active game
    activeTabLink: null,

    // open the game
    openGame: function (button, gameName) {

      const { tablinks, tabcontent } = myGame;

      // clear former active game
      if (myGame.activeGame) {
        myGame.activeTabLink.classList.remove('active');
        myGame.activeTabContent.style.display = 'none';
      } else {
        // clear all games
        for (const tl of tablinks) {
          tl.classList.remove('active');
        }
        for (const tc of tabcontent) {
          tc.style.display = 'none';
        }
      }

      // activate new game
      myGame.activeTabLink = button;
      myGame.activeGame = gameName;
      myGame.activeTabContent = document.getElementById(gameName);
      myGame.activeTabContent.style.display = 'block';
      myGame.activeTabLink.classList.add('active');
    },

    // copy contents of active game
    copyActiveToClipboard: function () {
      const range = document.createRange();

      range.selectNode(myGame.activeTabContent);
      window.getSelection().removeAllRanges(); /* clear current selection*/
      window.getSelection().addRange(range); /* to select text*/
      document.execCommand("copy");
      window.getSelection().removeAllRanges();/* to deselect*/
    }
  };

/* highlight active button */
.tablinks.active {
  color: blue;
}

<p>Copy contents of active game to clipboard:</p>
<button onclick="myGame.copyActiveToClipboard()">Copy</button>
<p>Click to select game:</p>
<div class="tab">
  <button class="tablinks" onclick="myGame.openGame(this, 'Cricket')">Cricket
  </button>
  <button class="tablinks" onclick="myGame.openGame(this, 'Football')">Football
  </button>
  <button class="tablinks" onclick="myGame.openGame(this, 'Chess')">Chess
  </button>
</div>

<div class="container" id="frame">
  <div id="Cricket" class="tabcontent">
    <p>Cricket</p>
  </div>

  <div id="Football" class="tabcontent">
    <p>Football</p>
  </div>

  <div id="Chess" class="tabcontent">
    <p>Chess</p>
  </div>
</div>