自定義選擇功能，複製到剪貼板pure JS

Question

當前代碼附加一個按鈕以快速選擇<pre>標記中的某些代碼。我想添加的是將該內容複製到剪貼板並將按鈕文本更改爲「複製」的功能。

如何通過修改下面的當前工作代碼來實現它？我不介意使用clipboard.js，jQuery位或自從Chrome 43以來推出的原生JS支持。我只是不知道如何從這裏繼續添加我需要的內容。

function selectPre(e) { 
    if (window.getSelection) { 
     var s = window.getSelection(); 
     if (s.setBaseAndExtent) { 
      s.setBaseAndExtent(e, 0, e, e.innerText.length - 1); 
     } 
     else { 
      var r = document.createRange(); 
      r.setStart(e.firstChild, 0); 
      r.setEnd(e.lastChild, e.lastChild.textContent.length); 
      s.removeAllRanges(); 
      s.addRange(r); 
     } 
    } 
    else if (document.getSelection) { 
     var s = document.getSelection(); 
     var r = document.createRange(); 
     r.selectNodeContents(e); 
     s.removeAllRanges(); 
     s.addRange(r); 
    } 
    else if (document.selection) { 
     var r = document.body.createTextRange(); 
     r.moveToElementText(e); 
     r.select(); 
    } 
} 
var diff = document.getElementById('diff_table').getElementsByTagName('tr'); 
var difflen = diff.length; 
for(i=0; i<difflen; i++) { 
    var newdiff = diff[i].childNodes[1]; 
    if (newdiff.className && (newdiff.className == 'added' || newdiff.className == 'modified')) { 
     newdiff.className += ' diff-select'; 
     newdiff.innerHTML = '<div class="btnbox"><button class="btn btn-default btn-xs" onclick="selectPre(this.parentNode.nextSibling)">Select</button></div>' + newdiff.innerHTML; 
    } 
} 

Answer 1

出於某種原因，確實是您selectPre功能上覆制的的jsfiddle情況下是找不到的。 Jsfiddle可能會擺脫它認爲是死代碼或爲了縮小而重命名它。

但是，如果它所做的是選擇<pre>標記的內容，那麼clipboard.js庫（已準備好使用）可以自己完成。

所以你最終要求正確配置剪貼板對象。使用一個：

new Clipboard('.btn', { 
    // The targeting to the correct content is done here. 
    target: function(trigger) { 
     return trigger.parentNode.nextSibling; 
    } 
    // clipboard.js will take the entire inner content of the <pre>, 
    // I think this is what you are trying to do in your "selectPre" 
    // function, but I am not sure. 
}); 

它模仿你selectPre(this.parentNode.nextSibling)，你不再需要連接到您的按鈕onclick屬性。

演示：http://jsfiddle.net/5k60nm1y/

注意，我猜你的表結構是什麼。它可能與您的實際表格不同，因此您可能需要微調newdiff分配給正確的單元格的方式。

如果您需要一些比<pre>標籤的內容更復雜的東西，可以通過將自定義函數傳遞給Clipboard構造函數選項的text屬性來微調Clipboard對象的行爲，而不是使用target財產。檢查剪貼板主頁，這是不言而喻的。如果你可以共享你的HTML表格，那麼你可以讓人們的任務更容易（並且你可能會得到更快的解決方案）。我不會需要猜測和創建一個假的。此外，我將爲您提供的代碼將直接適用於您的真實表格，而現在它可能仍需要定製。希望我猜對了，我的桌子靠近你。

Answer 2

我將一段代碼從這個資源How do I copy to the clipboard in JavaScript?應用到您的代碼中，讓您輕鬆瞭解它是如何完成的。

我也修改了你的onclick="selectPre(...)"這個onclick="selectPre(this)"並在「selectPre」函數中增加了一些變量。

這裏也是一個Fiddle demo

function selectPre(b) { 
    var s;        // added - selection variable 
    var e = b.parentNode.nextSibling; // added - parent sibling element 
    if (window.getSelection) { 
     var s = window.getSelection(); 
     if (s.setBaseAndExtent) { 
      s.setBaseAndExtent(e, 0, e, e.innerText.length - 1); 
     } 
     else { 
      var r = document.createRange(); 
      r.setStart(e.firstChild, 0); 
      r.setEnd(e.lastChild, e.lastChild.textContent.length); 
      s.removeAllRanges(); 
      s.addRange(r); 
     } 
    } 
    else if (document.getSelection) { 
     var s = document.getSelection(); 
     var r = document.createRange(); 
     r.selectNodeContents(e); 
     s.removeAllRanges(); 
     s.addRange(r); 
    } 
    else if (document.selection) { 
     var s = document.body.createTextRange(); 
     s.moveToElementText(e); 
     s.select(); 
    } 

    // added - copy and change button text 
    if (s) { 
     try { 
      var successful = document.execCommand('copy'); 
      // var msg = successful ? 'successful' : 'unsuccessful'; 
      // console.log('Copying text command was ' + msg); 
      if (successful) { 
       b.innerHTML = "Copied"; 
      } 
     } catch (err) { 
      // console.log('Oops, unable to copy'); 
     } 
    } 
} 
var diff = document.getElementById('diff_table').getElementsByTagName('tr'); 
var difflen = diff.length; 
for(i=0; i<difflen; i++) { 
    var newdiff = diff[i].childNodes[1]; 
    if (newdiff.className && (newdiff.className == 'added' || newdiff.className == 'modified')) { 
     newdiff.className += ' diff-select'; 

     // altered - onclick handler 
     newdiff.innerHTML = '<div class="btnbox"><button class="btn btn-default btn-xs" onclick="selectPre(this)">Select</button></div>' + newdiff.innerHTML; 
    } 
}