クリップボードにコピーするカスタム選択機能JS

Question

現在のコードでは、<pre>タグのコードをすばやく選択するためのボタンが追加されています。私が追加したいのは、そのコンテンツをクリップボードにコピーし、ボタンテキストを「コピー」に変更する機能です。

以下の現在の作業コードを変更するとどうすれば実現できますか？私はclipboard.js、jQueryビット、またはChrome 43以降で導入されたネイティブJSサポートを使用しても構いません。私が必要とするものを追加するにはどうすればいいのか分かりません。 jsfiddleにケースを再生する際に実際にあなたのselectPre機能が見つからない何らかの理由

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

。 Jsfiddleは、死んだコードが何であると思っているのかを取り除くことも、縮小のために名前を変更することもできます。

しかし、<pre>タグの内容を選択すると、clipboard.jsライブラリ（使用準備が整っています）で既にそれを行うことができます。

これで、クリップボードオブジェクトを正しく設定する必要があります。その1つの使用：

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

を、それはあなたがもはやあなたのボタンのonclick属性にアタッチする必要があなたのselectPre(this.parentNode.nextSibling)を模倣します。

デモ：私はあなたのテーブル構造が何であるかを推測しなければならなかったhttp://jsfiddle.net/5k60nm1y/

注意。実際のテーブルと異なる場合がありますので、newdiffが正しいセルにどのように割り当てられているかを微調整する必要があります。

<pre>タグの内部コンテンツより複雑なものが必要な場合は、カスタム関数をクリップボードコンストラクタオプションのtextプロパティに渡すことで、クリップボードオブジェクトの動作を微調整できます。 targetプロパティ。クリップボードのホームページをチェックしてください、それは全く自明です。

Zacが述べたように、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; 
    } 
}