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

Question

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

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

要回答这个具体问题：

活动按钮具有“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>

Answer 4

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