Benutzerdefinierte Funktion mit Kopieren in die Zwischenablage auswählen pure JS

Question

Der aktuelle Code hängt eine Schaltfläche an, um schnell einen Code in einem <pre>-Tag auszuwählen. Was ich hinzufügen möchte, ist die Möglichkeit, diesen Inhalt in die Zwischenablage zu kopieren und den Schaltflächentext in "kopiert" zu ändern.

Wie kann ich dies erreichen, indem ich den aktuellen Arbeitscode unten ändere? Ich hätte nichts dagegen, clipboard.js, jQuery-Bits oder nur native JS-Unterstützung zu verwenden, wie es seit Chrome 43 eingeführt wurde. Ich weiß einfach nicht, wie ich weitermachen soll, wenn ich etwas hinzufüge, was ich brauche.

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

Aus irgendeinem Grund in der Tat Ihre selectPre Funktion nicht gefunden wird, wenn Sie den Fall auf jsfiddle reproduzieren. Jsfiddle kann den toten Code entfernen oder umbenennen, um es zu verkleinern.

Aber wenn es den Inhalt eines <pre> Tags auswählt, kann die clipboard.js Bibliothek (die Sie verwenden können) das schon alleine machen.

Sie benötigen also eine korrekte Konfiguration des Zwischenablageobjekts. Mit, dass man:

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

es Ihre selectPre(this.parentNode.nextSibling) nachahmt, die Sie nicht mehr benötigen, um die onclick Attribut Ihrer Taste zu befestigen.

Demo: http://jsfiddle.net/5k60nm1y/

Bitte beachte, dass ich hatte zu erraten, was Ihre Tabellenstruktur ist. Es kann sich von Ihrer tatsächlichen Tabelle unterscheiden, daher müssen Sie möglicherweise genau einstellen, wie der richtigen Zelle zugewiesen wird.

Wenn Sie etwas komplizierter als nur den inneren Gehalt des <pre> Tag benötigen, können Sie das Verhalten der Zwischenablage Objekt Feinabstimmung durch eine benutzerdefinierte Funktion zum text Eigenschaft der Zwischenablage Konstruktor Option vorbei, statt der Verwendung der target Eigentum. Überprüfen Sie die Zwischenablage Homepage, es ist ziemlich selbsterklärend.

Wie von Zac erwähnt, hätten Sie die Aufgabe der Leute leichter gemacht (und Sie hätten wahrscheinlich viel schneller eine Lösung erhalten), wenn Sie Ihre HTML-Tabelle teilen könnten. Ich hätte nicht raten müssen und einen falschen erschaffen. Außerdem wäre der Code, den ich Ihnen zur Verfügung gestellt hätte, direkt auf Ihren realen Tisch anwendbar gewesen, während er jetzt noch angepasst werden muss. Hoffentlich habe ich es richtig vermutet und mein Tisch ist in der Nähe deines.

Answer 2

Ich habe einen Code aus dieser Ressource, How do I copy to the clipboard in JavaScript?, auf Ihren Code angewendet, damit Sie leicht sehen können, wie es gemacht werden kann.

Ich habe auch Ihre onclick="selectPre(...)" zu dieser onclick="selectPre(this)" geändert und ein paar Variablen in der "SelectPre" -Funktion hinzugefügt.

Hier ist auch ein 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; 
    } 
}