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

Question

我创建了一个带有三个按钮的选项卡菜单。我可以在传递 id 后复制单个选项卡内容<div>。如何获取活动选项卡的 ID <div>，以便我可以通过该 ID 来range.selectNode(document.getElementById(*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 存储在这些函数范围之外的变量中。//&nbsp; function to copyvar activeTabId = 'Cricket'; // Or whatever your default tab isfunction CopyToClipboard(){&nbsp; &nbsp;var range = document.createRange();&nbsp; &nbsp;//range.selectNode(document.getElementById("Cricket"));&nbsp; &nbsp;range.selectNode(document.getElementById(activeTabId)); // here you use the variable&nbsp; &nbsp;&nbsp; &nbsp;window.getSelection().removeAllRanges(); /* clear current selection*/&nbsp; &nbsp;window.getSelection().addRange(range); /* to select text*/&nbsp; &nbsp;document.execCommand("copy");&nbsp; &nbsp;window.getSelection().removeAllRanges();/* to deselect*/}function openGame(evt, GameName){&nbsp; &nbsp; var i, tabcontent, tablinks;&nbsp; &nbsp; tabcontent = document.getElementsByClassName("tabcontent");&nbsp; &nbsp; for (i = 0; i < tabcontent.length; i++) {&nbsp; &nbsp; tabcontent[i].style.display = "none";&nbsp; &nbsp; }&nbsp; &nbsp; tablinks = document.getElementsByClassName("tablinks");&nbsp; &nbsp; for (i = 0; i < tablinks.length; i++) {&nbsp; &nbsp; tablinks[i].className = tablinks[i].className.replace(" active", "");&nbsp; &nbsp; }&nbsp; &nbsp; document.getElementById(GameName).style.display = "block";&nbsp; &nbsp; evt.currentTarget.className += " active";&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; activeTabId = GameName; // here you assign the active tab value}还。您可能希望提前获取选项卡的引用 - 这样您就不必在每次执行两个函数时都搜索 DOM。

Answer 2

您可以简单地将 CopyToClipboard 函数调整为：我使用 querySelector 获取活动 tablink 元素，然后获取它的内部文本，即 tabcontent id 之一。//&nbsp; function to copyfunction CopyToClipboard(){&nbsp; var activeTabId = document.querySelector('.tablinks.active').innerText;&nbsp; &nbsp;var range = document.createRange();&nbsp; &nbsp;range.selectNode(document.getElementById(activeTabId));&nbsp; &nbsp;window.getSelection().removeAllRanges(); /* clear current selection*/&nbsp; &nbsp;window.getSelection().addRange(range); /* to select text*/&nbsp; &nbsp;document.execCommand("copy");&nbsp; &nbsp;window.getSelection().removeAllRanges();/* to deselect*/}

Answer 3

问题：“如何获取活跃用户的ID <div>？”要回答这个具体问题：活动按钮具有“tablinks active”类，并且它的innerHTML 包含与活动div 的ID 相同的文本。此函数将从活动按钮中检索与 div ID 匹配的文本：&nbsp; // return the active div's ID&nbsp; function activeDivId () {&nbsp; &nbsp; let activeButtons =&nbsp; &nbsp; &nbsp; document.getElementsByClassName('tablinks active');&nbsp; &nbsp; if (activeButtons.length === 0) {&nbsp; &nbsp; &nbsp; return null;&nbsp; &nbsp; }&nbsp; &nbsp; const activeButton = activeButtons[0];&nbsp; &nbsp; return activeButton.innerHTML;&nbsp; }让它变得更好虽然这严格地回答了问题，但这并不是最有效的方法，并且有多种方法可以使代码变得更好。以下原则可以指导改进：始终将应用程序的状态存储在 DOM 之外。为了提高速度，请尽量减少对 DOM 的查询和操作。为了避免命名冲突，请将变量和函数名称括在对象中。for...of当或for...in足够时，避免使用索引 for 循环。这是该游戏的修改版本，遵循以下原则：&nbsp; // put game inside an object to avoid global name conflicts&nbsp; const myGame = {&nbsp; &nbsp; // static parts of the DOM&nbsp; &nbsp; tabcontent: document.getElementsByClassName('tabcontent'),&nbsp; &nbsp; tablinks: document.getElementsByClassName('tablinks'),&nbsp; &nbsp; // name of currently active game&nbsp; &nbsp; activeGame: null,&nbsp; &nbsp; // div of active game content&nbsp; &nbsp; activeTabContent: null,&nbsp; &nbsp; // button of active game&nbsp; &nbsp; activeTabLink: null,&nbsp; &nbsp; // open the game&nbsp; &nbsp; openGame: function (button, gameName) {&nbsp; &nbsp; &nbsp; const { tablinks, tabcontent } = myGame;&nbsp; &nbsp; &nbsp; // clear former active game&nbsp; &nbsp; &nbsp; if (myGame.activeGame) {&nbsp; &nbsp; &nbsp; &nbsp; myGame.activeTabLink.classList.remove('active');&nbsp; &nbsp; &nbsp; &nbsp; myGame.activeTabContent.style.display = 'none';&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; // clear all games&nbsp; &nbsp; &nbsp; &nbsp; for (const tl of tablinks) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tl.classList.remove('active');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; for (const tc of tabcontent) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tc.style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; // activate new game&nbsp; &nbsp; &nbsp; myGame.activeTabLink = button;&nbsp; &nbsp; &nbsp; myGame.activeGame = gameName;&nbsp; &nbsp; &nbsp; myGame.activeTabContent = document.getElementById(gameName);&nbsp; &nbsp; &nbsp; myGame.activeTabContent.style.display = 'block';&nbsp; &nbsp; &nbsp; myGame.activeTabLink.classList.add('active');&nbsp; &nbsp; },&nbsp; &nbsp; // copy contents of active game&nbsp; &nbsp; copyActiveToClipboard: function () {&nbsp; &nbsp; &nbsp; const range = document.createRange();&nbsp; &nbsp; &nbsp; range.selectNode(myGame.activeTabContent);&nbsp; &nbsp; &nbsp; window.getSelection().removeAllRanges(); /* clear current selection*/&nbsp; &nbsp; &nbsp; window.getSelection().addRange(range); /* to select text*/&nbsp; &nbsp; &nbsp; document.execCommand("copy");&nbsp; &nbsp; &nbsp; window.getSelection().removeAllRanges();/* to deselect*/&nbsp; &nbsp; }&nbsp; };/* highlight active button */.tablinks.active {&nbsp; 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">&nbsp; <button class="tablinks" onclick="myGame.openGame(this, 'Cricket')">Cricket&nbsp; </button>&nbsp; <button class="tablinks" onclick="myGame.openGame(this, 'Football')">Football&nbsp; </button>&nbsp; <button class="tablinks" onclick="myGame.openGame(this, 'Chess')">Chess&nbsp; </button></div><div class="container" id="frame">&nbsp; <div id="Cricket" class="tabcontent">&nbsp; &nbsp; <p>Cricket</p>&nbsp; </div>&nbsp; <div id="Football" class="tabcontent">&nbsp; &nbsp; <p>Football</p>&nbsp; </div>&nbsp; <div id="Chess" class="tabcontent">&nbsp; &nbsp; <p>Chess</p>&nbsp; </div></div>

Answer 4

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